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

来源：互联网发布：角色扮演手游知乎编辑：程序博客网时间：2024/05/17 22:17

需求如下：地图上加载上万个点。使用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>    

0 0