百度地圖 聚合點 優化

百度地圖聚合點，超過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 = , 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 = ; 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 + ;
                 var lat = (this._center.lat * (l - ) + marker.getPosition().lat) / l;
                 var lng = (this._center.lng * (l - ) + 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 = ; 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 = ; i < len; i++) {
                 this._map.addOverlay(this._markers[i]);
             }
         } else {
             this._map.addOverlay(this._clusterMarker);
             this._isReal = true;
             this.updateClusterMarker();
         }
     }
           

原位址：https://www.cnblogs.com/liquant/p/8709278.html