百度地图———点聚合

背景：

百度地图提供的点聚合方案，点一下会自动散开成各个点，但是有些情况是我需要点一下获取到这个聚合物下的所有点，来做一些业务操作，很遗憾百度地图没有暴露出这个事件来

解决：

根据百度地图官方的方案，提供了2个插件，一个是MarkerClusterer.js这个是聚合物的逻辑，还有一个是TextIconOverlay.js，这个是聚合物在地图上展示的图标

用法是

const markerClusterer = new BMapLib.MarkerClusterer(map实例，options)

期望是在options里面能传入onClusterClick方法，入参是点击聚合物下的所有点
到时候就可以这样使用了

const markerClusterer = new BMapLib.MarkerClusterer(map实例，{
    onClusterClick: markers => {
        // 期望的业务操作
    }
})

改造插件源码

1. MarkerClusterer.js 大概129行左右，增加行代码

this._onClusterClick = opts.onClusterClick || function(){};

image.png

这个opts.onCluserClick就是我们上面期望传入的onCluserClick事件，假设已经传入了

这样的话就会在new的时候赋予 _onCluserClick属性

2. 还是MarkerClusterer.js 大概463行，这个位置会new一个聚合图标的实例，在这里我们往后面多传一个参数进去

image.png

3. 在TextIconOverlay.js 的大概786行加入以下代码
   通过步骤二多传的参数，我们可以从this._options里拿到那个多传的cluser参数，从步骤二的图里可以看到 cluser._markers可以拿到我们需要的东西

image.png

这里因为项目是移动端，所以用了ontouchstart，如果是PC端页面要改成onclick（注意要小写，这里不是react了）

试了一下差不多可以了