百度地图api根据地图缩放等级显示不同的marker点
2017-04-06 15:46
501 查看
功能一里面有marker点后台的代码根据地图的缩放等级显示不同marker点的坐标JSP代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head>
7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <title>地图</title>
10
11 <link href="css/style.css" rel="stylesheet" type="text/css" />
12 <script type="text/javascript" src="js/jquery.js"></script>
13
14 <style type="text/css">
15 html {
16 height: 100%
17 }
18
19 body {
20 height: 100%;
21 margin: 0px;
22 padding: 0px
23 }
24
25 #container {
26 height: 90%
27 }
28 </style>
29 <script type="text/javascript"
30 src="http://api.map.baidu.com/api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP">
31 </script>
32 <script type="text/javascript">
33 var markers = [];
34 $(document).ready(function() {
35 initMap();//显示地图
36 setInterval("frash()", 3000); //定时器，每3秒调用frash()
37 });
38 function getdata() {
39 $.ajax({
40 url : "dituList.do",
41 type : "post",
42 success : function(data) {
43 $.each(data, function(i, d) {
44 markers[i] = {
45 content : "我的备注",
46 title : d.title,
47 imageOffset : {
48 width : -46,
49 height : -21
50 },
51 position : {
52 lat : d.jd,
53 lng : d.wd
54 }
55 };
56 });
57 }
58
59 });
60 }
61 </script>
62 </head>
63 <body>
64 <!-- <form action="dituSave.do" method="post">
65 <div class="form-group">
66 <label>经度</label>
67 <input name="jd" type="text" id="jd" placeholder="请输入经度" class="form-control" style="width:40%">
68 </div>
69
70 <div class="form-group">
71 <label>纬度</label>
72 <input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="width:40%">
73 </div>
74
75 <div>
76 <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" style="margin-right:60%"><strong>定位</strong>
77 </button></div>
78
79 </form>
80 -->
81 <!--百度地图容器-->
82 <div
83 style="width: 100%; height: 100%; border: #ccc solid 1px; font-size: 12px"
84 id="map"></div>
85 </body>
86 <script type="text/javascript">
87 //创建和初始化地图函数：
88 function initMap() {
89 //alert("111"+markers[1].position.lat);
90 createMap();//创建地图
91 setMapEvent();//设置地图事件
92 addMapControl();//向地图添加控件
93 addMapOverlay();//向地图添加覆盖物
94 }
95 function createMap() {
96 map = new BMap.Map("map"); //建树Map实例
97 map.centerAndZoom(new BMap.Point(118.059014, 36.812474), 13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。
98
99 }
100 function setMapEvent() {
101 map.enableScrollWheelZoom();//启用地图滚轮放大缩小
102 map.enableKeyboard();//启用键盘上下左右键移动地图
103 map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
104 map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写)
105 }
106 function addClickHandler(target, window) {
107 target.addEventListener("click", function() {
108 target.openInfoWindow(window);
109 });
110 }
111 function frash() {
112
113 map.clearOverlays();//清空地图上标注点
114 getdata(); //获得marker点的数组
115 addMapOverlay(); //将marker点的信息显示在地图上
116 markers.splice(0, markers.length);//清空数组
117 }
118 //设置点Icon
119 function addMapOverlay() {
120 var u = map.getZoom(); // 定义地图缩放等级的变量
121 if (u >= 13) { // 如果缩放等级大于等于13
122 //把marker点的信息显示在地图上
123 for (var index = 0; index < markers.length; index++) {
124 var point = new BMap.Point(markers[index].position.lng,
125 markers[index].position.lat);
126 var marker = new BMap.Marker(
127 point,
128 {
129 icon : new BMap.Icon(
130 "http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
131 new BMap.Size(20, 25),
132 {
133 imageOffset : new BMap.Size(
134 markers[index].imageOffset.width,
135 markers[index].imageOffset.height)
136 })
137 });
138 var label = new BMap.Label(markers[index].title, {
139 offset : new BMap.Size(25, 5)
140 }); //a
141 var opts = { //a
142 width : 200, //a
143 title : markers[index].title, //a
144 enableMessage : false
145 //a
146 }; //a
147 var infoWindow = new BMap.InfoWindow(markers[index].content,
148 opts); //a
149 marker.setLabel(label);//显示地理名称 a
150 // marker.setLabel();//不显示地理名称 a
151 addClickHandler(marker, infoWindow); //a
152 map.addOverlay(marker);
153 }
154 //地图缩放等级小于13不显示marker点
155 else{
156
157 }
158 }
159 }
160 //向地图添加控件
161 function addMapControl() {
162 var scaleControl = new BMap.ScaleControl({
163 anchor : BMAP_ANCHOR_BOTTOM_LEFT
164 });
165 scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
166 map.addControl(scaleControl);
167 var navControl = new BMap.NavigationControl({
168 anchor : BMAP_ANCHOR_TOP_LEFT,
169 type : BMAP_NAVIGATION_CONTROL_LARGE
170 });
171 map.addControl(navControl);
172 var overviewControl = new BMap.OverviewMapControl({
173 anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
174 isOpen : true
175 });
176 map.addControl(overviewControl);
177 }
178 var map;
179 // initMap();
180 </script>
181 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图api根据地图缩放等级显示不同的marker点，功能二
- 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
- 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
- 百度地图多个兴趣点（经纬度、坐标点）需要同时显示在地图上，如何设置自动缩放等级
- 百度地图 根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
- 根据百度地图API得到坐标和地址并在地图上显示
- 高德地图多个Marker标记自动缩放全部显示在屏幕中
- 基于Google提供play-services:9.8.0的Google 地图开发，适用于Activity、Fragment，并实现添加Marker和根据经纬度显示运动轨迹
- (转)高德地图多个Marker标记自动缩放全部显示在屏幕中
- 高德地图多个Marker标记自动缩放全部显示在屏幕中
- 使用百度地图API根据坐标显示地图
- 百度地图AIP（2）：地图根据标注点位置自适应调整缩放等级
- 使用 根据语言环境不同 而显示不同的 资源本地化 ASP.NET 网页
- asp.net 2.0中根据roles显示不同的sitemap
- 在使用Repeater、DataList 或 DataGrid 的模板列表时,根据不同状态,显示不同颜色
- 页面根据不同Url显示不同Title以及不同的Mete
- DataGridView中的行如何根据不同的值显示不同的行背景色
- DataGrid中使用CheckBox时根据帮定的数据显示不同的效果
- 使用 根据语言环境不同 而显示不同的 资源本地化 ASP.NET 网页
- 根据地区不同显示时间的javascript代码