阅读 2761

百度地图Marker优化方案

原文链接: www.cnblogs.com

简介

在使用百度地图的时候,我们需要在地图上增加标注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,能够让地图少渲染浏览器少绘制,就会把性能提升到最大化

代码是一种神奇的东西,我们可以驱动它干好多事情。为什么我们不好好做一个控制者呢!!

打赏作者通道↓↓↓

如果觉得这篇文章不错的话!点击推荐支持一下哦!!!

文章分类
前端