美文网首页
百度地图———点聚合

百度地图———点聚合

作者: 王善良_ | 来源:发表于2022-12-07 18:24 被阅读0次

    背景:

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

    解决:

    根据百度地图官方的方案,提供了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属性

    1. 还是MarkerClusterer.js 大概463行,这个位置会new一个聚合图标的实例,在这里我们往后面多传一个参数进去
    image.png
    1. 在TextIconOverlay.js 的大概786行加入以下代码
      通过步骤二多传的参数,我们可以从this._options里拿到那个多传的cluser参数,从步骤二的图里可以看到 cluser._markers可以拿到我们需要的东西
    image.png

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

    试了一下差不多可以了

    相关文章

      网友评论

          本文标题:百度地图———点聚合

          本文链接:https://www.haomeiwen.com/subject/jnnnfdtx.html