1. 程式人生 > >百度地圖 聚合點 優化

百度地圖 聚合點 優化

百度地圖聚合點,超過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();
         }
     }