百度地图Marker优化方案
简介
在使用百度地图的时候,我们需要在地图上增加标注Marker来展示设置信息。随着用户需要不断增多,加载更多的Marker标注信息成为了一种奢望。然而通过自己技术的提升,归结出来了一下方案。
引入百度地图
需要在百度http://lbsyun.baidu.com/index.php?title=jspopular注册为开发者。此过程略过...
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的密钥"></script>
</head>
在页面HTML 的<head>里引入百度提供的s
实例化地图
在body中创建div
<body> <div id="allmap" style="height: 550px;"></div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap", { enableMapClick: false });//实例化百度地图 map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//设置中心点位与缩放级别 map.enableScrollWheelZoom();//启用滚动 </script> </body>
这样就打开HTML就可以看到页面中引入的百度地图了。
在地图中创建Marker
// 百度地图API功能 var map = new BMap.Map("allmap", { enableMapClick: false });//实例化百度地图 map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//设置中心点位与缩放级别 map.enableScrollWheelZoom();//启用滚动 var pt = null,//点位 i = 0,// mark=null;//新标注 for(; i < 10; i++) { pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//随机实例point mark=new BMap.Marker(pt);//实例marker map.addOverlay(mark);//添加到地图上 };
现在地图上就会有10Marker标注
给地图绑定拖拽and缩放事件
//地图绑定拖拽事件 map.addEventListener('dragend', function(e){ console.log('拖拽事件'); }); //地图绑定滚动事件 map.addEventListener('zoomend', function(e){ console.log('缩放事件'); });
这样的话当地图缩放,或者拖拽时候就可以加载数据marker
获取可视区域
获取到可视区域就可以根据当前可视区域显示maker数据。这样避免不必要的marker显示出来。
var bounds = map.getBounds(), //获取可视区域 SouthWest = bounds.getSouthWest(), //可视区域左下角 NorthEast = bounds.getNorthEast(); //可视区域右上角 console.log("当前地图可视范围是:" + SouthWest.lng + "," + SouthWest.lat + "到" + NorthEast.lng + "," + NorthEast.lat);
获取我们再次请求数据的时候,判断当前marker是否存在,存在则不添加。这样的话就会提升很大的速度。
最终案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>marker--标注点位优化方案</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script> </head> <body> <div id="allmap" style="height: 550px;"></div> <p id='conunt'></p> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap", { enableMapClick: false });//实例化百度地图 map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);//设置中心点位与缩放级别 map.enableScrollWheelZoom();//启用滚动 var markers = [];//所有marker标注集合 //console.log(markers); //地图绑定拖拽事件 map.addEventListener('dragend', function(e){ getBounds('dragend'); }); //地图绑定滚动事件 map.addEventListener('zoomend', function(e){ getBounds('zoomend'); }); /** * 获取可视区域 * @type {string} 类型 * */ function getBounds(type){ //函数节流 if(getBounds.timer){ clearTimeout(getBounds.timer); getBounds.timer=null; } getBounds.timer=setTimeout(function(){ //如果超过2000则不加载 if(markers.length>=1000){ }else{ addMarker(100);//加载500个marker } var bounds = map.getBounds(), //获取可视区域 SouthWest = bounds.getSouthWest(), //可视区域左下角 NorthEast = bounds.getNorthEast(); //可视区域右上角 console.log("当前地图可视范围是:" + SouthWest.lng + "," + SouthWest.lat + "到" + NorthEast.lng + "," + NorthEast.lat); //处理显示与隐藏的marker var data=boundsShow(SouthWest.lng,NorthEast.lng,SouthWest.lat,NorthEast.lat); //把不在可视区域的maker隐藏起来 for(var i=0,lengths=data.listhide.length;i<lengths;i++){ data.listhide[i].hide(); } dom.innerText='共有:'+markers.length+'个点位,显示:'+data.listshow.length+'个点位';//设置地图上的marker数量 },200); } /** * 在可视区域显示,不在可视区域隐藏 * @smlng {number} 小 经度 * @bglng {number} 大 经度 * @smlat {number} 小纬度 * @bglat {number} 大纬度 * * return 返回显示的数量与隐藏的数量 * */ function boundsShow(smlng,bglng,smlat,bglat){ var listhide=[],//隐藏的数据 listshow=[];//显示的数据 for(var i=0,lengths=markers.length;i<lengths;i++){ var _point=markers[i].point; //如果marker的经度 小于可视范围的最大经度大于可视范围的最小经度-- //并且marker的纬度 小于可是范围的最大纬度大于可视范围的最小纬度--则需要显示 if(smlng<_point.lng && _point.lng<bglng && smlat<_point.lat && _point.lat < bglat){ //显示 listshow.push(markers[i]); //如果之前被隐藏则显示 if(!markers[i].isVisible()){ markers[i].show(); } }else{ //不显示 listhide.push(markers[i]); } } //返回显示的数量与隐藏的数量 return{ listshow:listshow, listhide:listhide } } /** * 新增marker * @MAX {number} 数量 * */ function addMarker(MAX){ dliags(true,'加载中...'); var pt = null,//点位 i = 0,// mark=null;//新标注 for(; i < MAX; i++) { pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//随机实例point mark=new BMap.Marker(pt);//实例marker map.addOverlay(mark);//添加到地图上 markers.push(mark);//存储到数组中 }; //等待绘制引擎渲染完毕再清楚弹出层 setTimeout(function(){ dliags(false); },0); } /** * 弹出层 * @state {Boolean} true:显示 or false:隐藏 * @txt {string} 显示文字 * */ function dliag(){ var dom=null; return function(state,txt){ var dlog=null,p=null; //如果为 true:显示 if(state){ if(dom){ document.body.appendChild(dom); }else{ p=document.createElement('p'); p.innerText=txt; p.style.width='100px'; p.style.height='45px'; p.style.textAlign='center'; p.style.position='absolute'; p.style.margin='auto'; p.style.zIndex='2'; p.style.left='0'; p.style.right='0'; p.style.bottom='0'; p.style.top='0'; p.style.backgroundColor='#F2F2F2'; p.style.lineHeight='45px'; p.style.borderRadius='5px'; dlog=document.createElement('div'); dlog.style.position='absolute'; dlog.style.zIndex='1'; dlog.style.margin='auto'; dlog.style.left='0'; dlog.style.right='0'; dlog.style.bottom='0'; dlog.style.top='0'; dlog.style.backgroundColor='#000'; dlog.style.opacity='0.6'; dom=document.createElement('div'); dom.appendChild(dlog); dom.appendChild(p); document.body.appendChild(dom); } }else{ document.body.removeChild(dom); } } } //弹出框 var dliags=dliag(); //添加marker addMarker(100); //获取conunt var dom=document.getElementById('conunt'); //设置显示数量 dom.innerText='共有:'+markers.length+'个点位,显示:'+markers.length; </script> </body> </html>
参考链接 demo
总结
在使用百度地图的时候,有时候会被百度地图限制 但是我们能优化的也只有js,能够让地图少渲染浏览器少绘制,就会把性能提升到最大化
代码是一种神奇的东西,我们可以驱动它干好多事情。为什么我们不好好做一个控制者呢!!
打赏作者通道↓↓↓
![打赏作者](https://images.cnblogs.com/cnblogs_com/xiaoxiaokun/1007663/t_QQ%E6%88%AA%E5%9B%BE20170727133155.png)
如果觉得这篇文章不错的话!点击推荐支持一下哦!!!