欢迎光临
一个有态度、有温度的分享型博客

百度地图标注管理器使用

百度地图标注批量管理:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> <title>百度地图标注管理器</title> </head> <body> <div style="width:550px;height:450px;border:1px solid gray;" id="container"></div> <button id="clearMarkers">clearMarkers</button> <button id="show">show markers</button> <button id="hide">hide markers</button> <button id="toggle">toggle markers</button> <script type="text/javascript" src="MarkerManager.js"></script> <script type="text/javascript"> //初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point,15); map.enableScrollWheelZoom(); var padding = 200; var mgr = new BMapLib.MarkerManager(map,{ borderPadding: padding ,maxZoom: 18 ,trackMarkers: true }); //定义不同缩放比例下显示的marker数量 var markersConfig = [{minZoom: 1, maxZoom: 10, markerCount:80 } ,{minZoom: 11, maxZoom: 12, markerCount:10 } ,{minZoom: 13, maxZoom: 15, markerCount:150 } ,{minZoom: 16, maxZoom: 17, markerCount:10 } ,{minZoom: 18, maxZoom: 19, markerCount:100 } ]; //为每个不同缩放比例下创建marker for(var i in markersConfig){ var t = markersConfig[i]; var mks = getRandomMarker(map,t.markerCount,padding); //增加不同缩放比例的marker mgr.addMarkers(mks,t.minZoom,t.maxZoom) } mgr.showMarkers(); map.addEventListener("zoomend",function(){ console.log('监听缩放'); }); map.addEventListener("dragend",function(){ console.log('监听地图拖拽'); }); $("clearMarkers").onclick = function(){ mgr.clearMarkers(); } $("show").onclick = function(){ mgr.show(); } $("hide").onclick = function(){ mgr.hide(); } $("toggle").onclick = function(){ mgr.toggle(); } /** * 随机生成marker * @param {Map} map 地图map对象 * @param {Number} num 要产生的marker的数量 * @param {Boolean} isInViewport 是否需要只在视口中的marker * @return {Array} marker的数组集合 */ function getRandomMarker(map,num,borderPadding){ var container = map.getContainer() , markers = [] , height = parseInt(container.offsetHeight,10) / 2 + borderPadding , width = parseInt(container.offsetWidth,10) / 2 + borderPadding; var center = map.getCenter(), pixel = map.pointToPixel(center); var realBounds = mgr._getRealBounds(); //随机一个新的坐标,不超过地图+borderPadding范围 for(var i = num; i--;){ var w = width * Math.random(), h = height * Math.random(); var newPixel = { x : pixel.x + (Math.random() > 0.5 ? w : -w), y : pixel.y + (Math.random() > 0.5 ? h : -h)} , newPoint = map.pixelToPoint(newPixel); var marker = new BMap.Marker(newPoint); if(realBounds.containsPoint(newPoint)){ markers.push(marker); (function(mk){ mk.addEventListener("dblclick",function(){ mgr.removeMarker(mk); }); })(marker); } } return markers; } /** * 根据id获取dom元素 * @param {String} id 元素ID * @return none * */ function $(id){ return document.getElementById(id); } </script> </body> </html>

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址