背景:
百度地图提供的点聚合方案,点一下会自动散开成各个点,但是有些情况是我需要点一下获取到这个聚合物下的所有点,来做一些业务操作,很遗憾百度地图没有暴露出这个事件来
解决:
根据百度地图官方的方案,提供了2个插件,一个是MarkerClusterer.js
这个是聚合物的逻辑,还有一个是TextIconOverlay.js
,这个是聚合物在地图上展示的图标
用法是
const markerClusterer = new BMapLib.MarkerClusterer(map实例,options)
期望是在options里面能传入onClusterClick
方法,入参是点击聚合物下的所有点
到时候就可以这样使用了
const markerClusterer = new BMapLib.MarkerClusterer(map实例,{
onClusterClick: markers => {
// 期望的业务操作
}
})
改造插件源码
- MarkerClusterer.js 大概129行左右,增加行代码
this._onClusterClick = opts.onClusterClick || function(){};
image.png
这个
opts.onCluserClick
就是我们上面期望传入的onCluserClick事件,假设已经传入了
这样的话就会在new的时候赋予 _onCluserClick
属性
- 还是MarkerClusterer.js 大概463行,这个位置会new一个聚合图标的实例,在这里我们往后面多传一个参数进去
- 在TextIconOverlay.js 的大概786行加入以下代码
通过步骤二多传的参数,我们可以从this._options
里拿到那个多传的cluser参数,从步骤二的图里可以看到 cluser._markers可以拿到我们需要的东西
这里因为项目是移动端,所以用了ontouchstart,如果是PC端页面要改成onclick
(注意要小写,这里不是react了)
试了一下差不多可以了
网友评论