此处为源代码位置
在源代码中有怎么一处代码,它就是导致使用了聚合点依旧卡顿的罪魁祸首
可以看到框起部分代码,此代码在渲染数据的过程中是先边渲染边计算聚合数,这会导致每计算一个点,就要渲染一次dom,因此导致页面变得非常卡顿。
下面是解决办法:
1.把这几行坏事的代码注释掉
2、此处添加代码
d.prototype._createClusters = function () {
var t = this._map.getBounds();
if (t.getCenter()) {
for (var e, n = l(this._map, t, this._gridSize), i = 0; e = this._markers[i]; i++) {
!e.isInCluster && n.containsPoint(e.getPosition()) && this._addToClosestCluster(e)
}
}
var len = this._markers.length;
for (var i = 0; i < len; i++) {
if (this._clusters[i]) {
this._clusters[i].render1();
}
}
3、在注释代码下面,添加render1方法,这样既可解决卡顿问题
t.prototype.addMarker = function (t) {
if (this.isMarkerInCluster(t)) return !1;
if (this._center) {
if (this._isAverageCenter) {
var e = this._markers.length + 1,
n = (this._center.lat * (e - 1) + t.getPosition().lat) / e,
i = (this._center.lng * (e - 1) + t.getPosition().lng) / e;
this._center = new BMap.Point(i, n), this.updateGridBounds()
}
} else this._center = t.getPosition(), this.updateGridBounds();
t.isInCluster = !0, this._markers.push(t);
// var o = this._markers.length;
// if (o < this._minClusterSize) return this._map.addOverlay(t), !0;
// if (o === this._minClusterSize) for (var a = 0; a < o; a++) {
// var r = this._markers[a].getLabel();
// this._markers[a].getMap() && this._map.removeOverlay(this._markers[a]), this._markers[a].setLabel(r)
// }
// return this._map.addOverlay(this._clusterMarker), this._isReal = !0, this.updateClusterMarker(), !0
},
t.prototype.render1 = 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 = !0;
this.updateClusterMarker();
}
},