百度地图聚合点优化教程

百度地图聚合点，超过1000个的时候就会开始卡。

以下是解决方法。需要先下载 js源码：MarkerCluster.js

进行以下修改后，放到自己的项目下面，自行引入。

1.找到_createClusters 方法,新增代码

   /**
     * 根据所给定的标记，创建聚合点
     * @return 无返回值
     */
    MarkerClusterer.prototype._createClusters = function(){
        var mapBounds = this._map.getBounds();
        var extendedBounds = getExtendedBounds(this._map, mapBounds, this._gridSize);
        for(var i = 0, marker; marker = this._markers[i]; i++){
            if(!marker.isInCluster && extendedBounds.containsPoint(marker.getPosition()) ){ 
                this._addToClosestCluster(marker);
            }
        }   
        // 这里添加代码块1
    };

代码块1：

     var len = this._markers.length;
     for (var i = 0; i < len; i++) {
         if(this._clusters[i]){
             this._clusters[i].render();
         }
     }

2.找到addMarker () 方法，删除以下代码

      Cluster.prototype.addMarker = function(marker){
         if(this.isMarkerInCluster(marker)){
             return false;
         }//也可用marker.isInCluster判断,外面判断OK，这里基本不会命中

         if (!this._center){
             this._center = marker.getPosition();
             this.updateGridBounds();//
         } else {
             if(this._isAverageCenter){
                 var l = this._markers.length + 1;
                 var lat = (this._center.lat * (l - 1) + marker.getPosition().lat) / l;
                 var lng = (this._center.lng * (l - 1) + marker.getPosition().lng) / l;
                 this._center = new BMap.Point(lng, lat);
                 this.updateGridBounds();
             }//计算新的Center
         }

         marker.isInCluster = true;
         this._markers.push(marker);

         /*   删除这里 ↓
         var len = this._markers.length;
         if(len < this._minClusterSize ){     
             this._map.addOverlay(marker);
             //this.updateClusterMarker();
             return true;
         } else if (len === this._minClusterSize) {
             for (var i = 0; i < len; i++) {
                 this._markers[i].getMap() && this._map.removeOverlay(this._markers[i]);
             }

         } 
         this._map.addOverlay(this._clusterMarker);
         this._isReal = true;
         this.updateClusterMarker();
         return true;
              删除这里 ↑
         */
     };

3.新增方法render()

    /**
     * 进行dom操作
     * @return 无返回值
     */
     Cluster.prototype.render = function(){
         var len = this._markers.length;

         if (len < this._minClusterSize) {
              for (var i = 0; i < len; i++) {
                 this._map.addOverlay(this._markers[i]);
             }
         } else {
             this._map.addOverlay(this._clusterMarker);
             this._isReal = true;
             this.updateClusterMarker();
         }
     }