百度地图api根据地图缩放等级显示不同的marker点，功能二

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

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

  1 <%@ 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>

转载于:https://www.cnblogs.com/zhoudi/p/6213761.html

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

百度地图api根据地图缩放等级显示不同的marker点
功能一里面有marker点后台的代码根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
python + 高德地图API实现地图找房
python + 高德地图API实现地图找房项目简介:根据工作地点信息和58同城爬取的租房信息,通过高德地图进行显示,同时利用高德API自动规划房源到工作地点的通勤路线(公交+地铁) 项目仓库:ht ...
高德地图 API，点击地图标记获取自定义标记 (Marker) 中的信息
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息通过高德地图 JS Web 添加自定义图标,自定义窗口标记已经能在地图中正常添加自定义标记了这篇文章讲讲点击标记时,如何 ...
Android中应用百度地图API开发地图APP实例-显示百度地图
场景效果在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY http://lbsyun.baidu.com/index.php 申请API_KEY 登录百度开放平台后找到控制台下 ...
android应用控制百度地图,Android中应用百度地图API开发地图APP实例-显示百度地图...
场景效果在使用百度地图API之前需要先在百度地图开放平台中申请API_KEY 申请API_KEY 登录百度开放平台后找到控制台下的应用管理-创建应用依次输入应用名,应用类型选择Android S ...
百度地图API实现地图应用
企业官网上需要用到地图应用,这里对百度地图API的使用做点笔记,好记性不如烂笔头. 实现地图应用的流程如下: 1.获取密钥:教程网址 https://jingyan.baidu.com/article ...
使用百度地图API实现地图生成、标记以及标注
首先你需要引入一段javaScript <script type="text/javascript" src="http://api.map.baidu.com/a ...
调用百度地图api实现地图查询功能
百度地图api功能强大,进入百度地图api平台之后首先需要注册申请一个ak码(其实就是权限码),通过审核之后就可以参考api提供的例子进行自定义的地图开发功能了. 在这里提供两个本人写好的地图查询功能 ...

百度地图api根据地图缩放等级显示不同的marker点，功能二

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

最新文章

热门文章