百度地图 聚合点 优化

百度地图聚合点,超过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();
         }
     }

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值