百度地图解决加载大量点时卡顿问题

需求如下：地图上加载上万个点。使用marker发现点太多页面会卡死，研究发现可以使用聚合及海量点实现。

js代码如下：

[html] view
plain copy

 

 





   

//聚合实现代码  

function ss(markerArr){//markerArr数据库数据查询的结果  

    var markers = [];   

    var pt = null;    

    var i = 0;    

    for (; i < markerArr.length; i++) {    

       pt = new BMap.Point(markerArr[i].longitude, markerArr[i].latitude);    

       markers.push(new BMap.Marker(pt));    

    }    

    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});   

}  

  

//海量点实现代码  

function sss(){  

    var points = [];  // 添加海量点数据  

    for (var i = 0; i < markerArr.length; i++) {  

        points.push(new BMap.Point(markerArr[i].longitude, markerArr[i].latitude));  

    }  

    var options = {  

            size: 6,  

            shape: 2,  

            color: '#d340c3'  

        };  

    basestationPointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection  

    basestationPointCollection.addEventListener('click', function (e) {  

          var basestationName="";//名称  

          var basestationType="";//地址  

          //关于自定义信息 修改json [[经度,维度,1,名称,地址,电话]]  

          //循环查出值  

          for (var i = 0; i < markerArr.length; i++) {  

              points.push(new BMap.Point(markerArr[i].longitude,markerArr[i].latitude));  

              if(markerArr[i].longitude==e.point.lng&&markerArr[i].latitude==e.point.lat){//经度==点击的,维度  

                  basestationName=markerArr[i].basestationName;  

                  basestationType=markerArr[i].basestationType;  

                  break;  

              }  

          }  

          var point = new BMap.Point(e.point.lng, e.point.lat);  

          var opts = {  

              width: 250, // 信息窗口宽度  

              height: 70, // 信息窗口高度  

              title:"", // 信息窗口标题  

              enableMessage: false,//设置允许信息窗发送短息  

          }  

          var infowindow = new BMap.InfoWindow("基站名称:"+basestationName+"<br/>基站类型:"+basestationType);  

          map.openInfoWindow(infowindow, point);  

      });  

    map.addOverlay(basestationPointCollection);  // 添加Overlay  

}  

  

//地图上自定义控件：自定义多选框  

function showMap(){  

    map = new BMap.Map("information_date",{minZoom:6,maxZoom:17}); // 创建地图实例  

    if(city==""){  

        map.centerAndZoom("西安",14); // 初始化地图,设置中心点坐标和地图级别。  

    }else{  

        map.centerAndZoom(city,14); // 初始化地图,设置中心点坐标和地图级别。  

    }  

    map.enableScrollWheelZoom(true); //启用滚轮放大缩小   

    //向地图中添加缩放控件    

    var ctrlNav = new window.BMap.NavigationControl({    

        anchor: BMAP_ANCHOR_TOP_LEFT,    

        type: BMAP_NAVIGATION_CONTROL_LARGE    

    });    

    map.addControl(ctrlNav);    

      

    //向地图中添加比例尺控件    

    var ctrlSca = new window.BMap.ScaleControl({    

        anchor: BMAP_ANCHOR_BOTTOM_LEFT    

    });    

    map.addControl(ctrlSca);   

      

     // 定义一个控件类,即function  

    function ZoomControl(){  

      // 默认停靠位置和偏移量  

      this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;  

      this.defaultOffset = new BMap.Size(10, 10);  

    }  

  

    // 通过JavaScript的prototype属性继承于BMap.Control  

    ZoomControl.prototype = new BMap.Control();  

  

    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回  

    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中  

    ZoomControl.prototype.initialize = function(map){  

      // 创建一个DOM元素  

      var div = document.createElement("div");  

      var business = div.appendChild(document.createElement("input"));  

      div.appendChild(document.createTextNode("营业厅信息"));  

      div.appendChild(document.createElement("br"))  

        

      var cell = div.appendChild(document.createElement("input"));  

      div.appendChild(document.createTextNode("4G工参信息"));  

      div.appendChild(document.createElement("br"))  

        

      var basestation = div.appendChild(document.createElement("input"));  

      div.appendChild(document.createTextNode("规划基站信息"));  

      business.type="checkbox";  

      business.name="message";  

      business.id="bus"  

      business.checked="checked";  

      cell.type="checkbox";  

      cell.name="message";  

      cell.id="cel"  

      cell.checked="checked";  

      basestation.type="checkbox";  

      basestation.name="message";  

      basestation.id="bas";  

      basestation.checked="checked";  

            

            

      // 设置样式  

      div.style.cursor = "pointer";  

//      div.style.border = "1px solid gray";  

      div.style.backgroundColor = "white";  

      div.style.width='120px'  

      // 绑定事件,点击一次放大两级  

      business.onclick = function(e){//营业厅  

         if(document.getElementById("bus").checked){//是否被选中  

             showMapMessage(true,false,false);  

         }else{  

             showHall();   

         }  

      }  

      cell.onclick = function(e){//4G工参  

         if(document.getElementById("cel").checked){//是否被选中  

             showMapMessage(false,false,true);   

         }else{  

             showCell();  

         }  

      }  

      basestation.onclick = function(e){//规划基站  

         if(document.getElementById("bas").checked){//是否被选中  

             showMapMessage(false,true,false);   

         }else{  

             showBasestation();  

         }  

      }  

      // 添加DOM元素到地图中  

      map.getContainer().appendChild(div);  

      // 将DOM元素返回  

      return div;  

    }  

    // 创建控件  

    var myZoomCtrl = new ZoomControl();  

    // 添加到地图当中  

    map.addControl(myZoomCtrl);  

      

}  

jsp页面代码如下：

[html] view
plain copy

 

 





<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>    

<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>      

<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>      

<script type="text/javascript">    

    var path = "<%=request.getContextPath()%>";    

    var hall = "<%=request.getContextPath()%>/common/my_resource/picture/hall.png";    

</script>    

</head>    

<body style="height:100%; width:100%">    

      <!-- 数据div -->    

      <div id="information_date" ></div>    

</body>