vue-baidu-map大量数据使用点聚合依旧卡顿问题解决办法

此处为源代码位置

在源代码中有怎么一处代码,它就是导致使用了聚合点依旧卡顿的罪魁祸首

可以看到框起部分代码,此代码在渲染数据的过程中是先边渲染边计算聚合数,这会导致每计算一个点,就要渲染一次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();

                        }

                    },

参考文章:

百度地图点聚合MarkerClusterer,性能优化 - anyuan9 - 博客园 (cnblogs.com)

感谢指导老师的帮助

  • 25
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值