微信小程序地图聚合以及轨迹回放

微信小程序地图聚合以及轨迹回放,第1张

公司项目需要实现小程序地图的聚合以及轨迹回放,效果要与PC端一直。其中,轨迹回放还需要包含开始、暂停、结束三个按钮。效果图如下:

1、添加图标

2、聚合,其中,如果发雀简现聚合点不开的情况,可以把grikSize的值设置小一点,默认值为60

3、点击图标,获取addMarker设闷岁隐置的  Id 值

4、定时画线条

同时,画线条之前,还需要清除按蚂厅钮

研究百度地图聚合源码发现,如薯洞滚果打算自定义文字需要修改两处:

一、修改 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

聚合前有引用一个聚合的JS类库的,其实点聚合的效果的达到是百度地图接口有个方法是根据可视区域进行御粗分若干个格肆袜子,然后根据点的经纬度在哪个格子里面,再根据每个格子里面的多少个经纬度来进行聚合。

new BMapLib.MarkerClusterer(map, {markers:markers})这句话就是调用markerClusterer类去干分格子然后计算经纬度在格子里头的数量后并且显示的镇雹镇过程


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12355719.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存