百度地图加载海量点、聚合

标签：

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

js代码如下：

 
//聚合实现代码
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);
    
}

    <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>  

百度地图加载海量点、聚合

标签：

原文地址：http://blog.csdn.net/yeyujiao8888/article/details/51331141