百度地圖 聚合點 優化
阿新 • • 發佈:2019-02-06
百度地圖聚合點,超過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();
}
}