您的当前位置:首页正文

百度地图聚合功能自定义聚合文字

2022-07-14 来源:爱go旅游网

有网友碰到这样的问题“百度地图聚合功能自定义聚合文字”。小编为您整理了以下解决方案,希望对您有帮助:

解决方案1:

研究百度地图聚合源码发现,如果打算自定义文字需要修改两处:
一、修改 BMapLib.MarkerClusterer.js 插件中 Cluster.prototype.updateClusterMarker 方法,实现过程如下:

方法中: this._clusterMarker.setText(this._markers.length); 表示, 聚合点显示的文字内容是 当前 Cluster 类 _markers 属性 的 长度;

二、修改 TextIconOverlay.js 中的 构造方法 和 样式方法

查看 TextIconOverlay.js 的源码发现, text 只支持 数字类型的值,而且和 styles 属性绑定,需要修改constructor 方法, 和 设置属性的方法。

如上,知道了聚合的文字是 Cluster.prototype.updateClusterMarker 方法 , 那么我们需要进行以下步骤:

通过查看百度地图聚合源码,发现 Cluster 类调用了 marker 的 getPosition 和 getMap 方法,我们需要自定义这俩方法如下:

最终,我们实现了自定义 百度地图点聚合文字 信息。

附Github: https://github.com/sphenginx/vue-slider

类 BMapLib.MarkerClusterer

显示全文