功能一里面有marker点后台的代码

根据地图的缩放等级显示不同marker点的坐标JSP代码

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>地图</title>

 <link href="css/style.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript" src="js/jquery.js"></script>

 <style type="text/css">

 html {

     height: 100%

 }

 body {

     height: 100%;

     margin: 0px;

     padding: 0px

 }

 #container {

     height: 90%

 }

 </style>

 <script type="text/javascript"

     src="http://api.map.baidu.com/api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP">

 </script>

 <script type="text/javascript">

     var markers = [];

     $(document).ready(function() {

         initMap();//显示地图

         setInterval("frash()", 3000); //定时器，每3秒调用frash()

     });

     function getdata() {

         $.ajax({

             url : "dituList.do",

             type : "post",

             success : function(data) {

                 $.each(data, function(i, d) {

                     markers[i] = {

                         content : "我的备注",

                         title : d.title,

                         imageOffset : {

                             width : -46,

                             height : -21

                         },

                         position : {

                             lat : d.jd,

                             lng : d.wd

                         }

                     };

                 });

             }

         });

     }

 </script>

 </head>

 <body>

     <!-- <form action="dituSave.do" method="post">

 <div class="form-group">

 <label>经度</label>

 <input name="jd" type="text" id="jd" placeholder="请输入经度" class="form-control" style="width:40%">

 </div>

 <div class="form-group">

 <label>纬度</label>

 <input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="width:40%">

 </div>

 <div>

 <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" style="margin-right:60%"><strong>定位</strong>

 </button></div>

 </form>

  -->

     <!--百度地图容器-->

     <div

         style="width: 100%; height: 100%; border: #ccc solid 1px; font-size: 12px"

         id="map"></div>

 </body>

 <script type="text/javascript">

     //创建和初始化地图函数：

     function initMap() {

         //alert("111"+markers[1].position.lat);

         createMap();//创建地图

         setMapEvent();//设置地图事件

         addMapControl();//向地图添加控件

         addMapOverlay();//向地图添加覆盖物

     }

     function createMap() {

         map = new BMap.Map("map"); //建树Map实例

         map.centerAndZoom(new BMap.Point(118.059014, 36.812474), 13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。

     }

     function setMapEvent() {

         map.enableScrollWheelZoom();//启用地图滚轮放大缩小

         map.enableKeyboard();//启用键盘上下左右键移动地图

         map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)

         map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写)

     }

     function addClickHandler(target, window) {

         target.addEventListener("click", function() {

             target.openInfoWindow(window);

         });

     }

     function frash() {

         map.clearOverlays();//清空地图上标注点

         getdata(); //获得marker点的数组

         addMapOverlay(); //将marker点的信息显示在地图上

         markers.splice(0, markers.length);//清空数组

     }

     //设置点Icon

     function addMapOverlay() {

         var u = map.getZoom(); // 定义地图缩放等级的变量

         if (u >= 13) {   // 如果缩放等级大于等于13

             //把marker点的信息显示在地图上

             for (var index = 0; index < markers.length; index++) {

                 var point = new BMap.Point(markers[index].position.lng,

                         markers[index].position.lat);

                 var marker = new BMap.Marker(

                         point,

                         {

                             icon : new BMap.Icon(

                                     "http://api.map.baidu.com/lbsapi/createmap/images/icon.png",

                                     new BMap.Size(20, 25),

                                     {

                                         imageOffset : new BMap.Size(

                                                 markers[index].imageOffset.width,

                                                 markers[index].imageOffset.height)

                                     })

                         });

                 var label = new BMap.Label(markers[index].title, {

                     offset : new BMap.Size(25, 5)

                 }); //a

                 var opts = { //a

                     width : 200, //a

                     title : markers[index].title, //a

                     enableMessage : false

                 //a

                 }; //a

                 var infoWindow = new BMap.InfoWindow(markers[index].content,

                         opts); //a

                 marker.setLabel(label);//显示地理名称 a

                 // marker.setLabel();//不显示地理名称 a

                 addClickHandler(marker, infoWindow); //a

                 map.addOverlay(marker);

             }

         //地图缩放等级小于13不显示marker点

         else{

         }

         }

     }

     //向地图添加控件

     function addMapControl() {

         var scaleControl = new BMap.ScaleControl({

             anchor : BMAP_ANCHOR_BOTTOM_LEFT

         });

         scaleControl.setUnit(BMAP_UNIT_IMPERIAL);

         map.addControl(scaleControl);

         var navControl = new BMap.NavigationControl({

             anchor : BMAP_ANCHOR_TOP_LEFT,

             type : BMAP_NAVIGATION_CONTROL_LARGE

         });

         map.addControl(navControl);

         var overviewControl = new BMap.OverviewMapControl({

             anchor : BMAP_ANCHOR_BOTTOM_RIGHT,

             isOpen : true

         });

         map.addControl(overviewControl);

     }

     var map;

     //  initMap();

 </script>

 </html>

百度地图api根据地图缩放等级显示不同的marker点，功能二的更多相关文章

  1. 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法

    在桌面程序下 百度地图API的鼠标缩放地图功能可能会失灵无效! 这个原因不是API的问题 小弟试了下在WEB上面是没有问题的 于是考虑可能是WebBrowser的获取焦点问题,于是在主窗体 添加了一个 ...

  2. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  3. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  4. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  5. 百度地图API 级别自动缩放

    今天做一个基于百度地图API的小项目 查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,p ...

  6. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  7. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  8. 百度地图API开发一——仿照现有测距效果实现测面功能

      最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包——BMapLib.DistanceTool,效果如下: 这个效果体验很好 ...

  9. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

随机推荐

  1. sql server 更新视图的sp

    create procedure RefreshAllViewas begin declare @ViewName varchar(250) declare #views cursor for sel ...

  2. LeetCode-Search in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  3. Zookeeper 的学习与运用

    引子 云计算越来越流行的今天,单一机器处理能力已经不能满足我们的需求,不得不采用大量的服务集群.服务集群对外提供服务的过程中,有很多的配置需要随时更新,服务间需要协调工作,这些信息如何推送到各个节点? ...

  4. Monkey工具使用详解

    上节中介绍了Monkey工具使用环境的搭建,传送门..本节我将详细介绍Monkey工具的使用. 一.Monkey测试简介 Monkey测试是Android平台自动化的一种手段,通过Monkey程序模拟 ...

  5. WPF-流文档元素

    1.Block元素 用于分组其他元素 Paragraph是块级别元素,文本段落 Paragraph.Inlines集合内. 设置第一行缩进量Paragraph.TextIndet 2.Inline元素 ...

  6. Python之路，day9-Python基础

    回顾:抽象方法@staticmethod 不能访问类的任何属性@classmethod 类方法 只能访问公有属性@property 属性方法 , 把一个方法变成一个静态属性def sayhi() pa ...

  7. DEX 方法超过64K限制和gradle编译OOM问题解决

    如果你是一个android开发者,你至少听说过的Dalvik的蛋疼的64K方法限制.概括地说,在一个DEX文件,你可以调用很多的方法,但你只能调用它们最前面的65,536个 ,因为这是在方法调用集合中 ...

  8. SQLServer 自增主键创建, 指定自增主键列值插入数据,插入主键

    http://blog.csdn.net/zh2qiang/article/details/5323981 SQLServer 中含自增主键的表,通常不能直接指定ID值插入,可以采用以下方法插入. 1 ...

  9. 改写《python基础教程》中的一个例子

    一.前言 初学python,看<python基础教程>,第20章实现了将文本转化成html的功能.由于本人之前有DIY一个markdown转html的算法,所以对这个例子有兴趣.可仔细一看 ...

  10. [Maven] - Eclipse "maven compiler plugin" 冲突解决

    刚安装最新的Maven 3.2.5,在eclipse中使用maven的Run As->Maven Install,总会提示: Failed to execute goal org.apache. ...