高德点聚合，点击散开

高德地图在使用MarkerClusterer创建点聚合的功能，分别定义了renderClusterMarker、renderMarker但是，当经纬度靠的太近或者相同时，聚合点无法展开。想要实现Leaflet中使用markerCluster实现点聚合一样的最后点击展开的效果，应该如何实现？下图是希望实现的效果图

img

引用 皆我百晓生 小程序回复内容作答：

要实现高德地图中MarkerClusterer的最后点击展开的效果，可以通过以下步骤进行：

  1. 首先，在MarkerClusterer的构造函数中添加一个click事件监听器，用于监听聚合点的点击事件。

  2. 在点击事件中，调用getClusters()方法获取当前地图上的所有聚合点。

  3. 遍历聚合点数组，判断当前点击的聚合点和其它聚合点的经纬度是否相同或者非常接近。

  4. 如果经纬度相同或非常接近，将该聚合点的cluster_markers属性设置为聚合点的所有标记集合（即展开聚合点的效果）。

  5. 如果经纬度不同，将该聚合点的cluster_markers属性设置为空集合。

在高德地图的MarkerClusterer组件中，添加以下代码：

// 在构造函数中添加 click 事件监听器
this.on('click', function (e) {
  var clusters = this.getClusters();
  var clickedCluster = e.cluster;

  // 遍历聚合点数组
  for (var i = 0; i < clusters.length; i++) {
    var cluster = clusters[i];

    // 判断当前点击的聚合点和其它聚合点的经纬度是否相同或者非常接近
    if (cluster !== clickedCluster &&
      cluster.getCenter().equals(clickedCluster.getCenter())) {

      // 如果经纬度相同，将该聚合点的 cluster_markers 属性设置为聚合点的所有标记集合
      cluster.cluster_markers = clickedCluster.getMarkers();
    } else {

      // 如果经纬度不同，将该聚合点的 cluster_markers 属性设置为空集合
      cluster.cluster_markers = [];
    }
  }
});

这样当点击一个聚合点时，如果有其它聚合点与其经纬度相同或者非常接近，被点击的聚合点会展开并显示所有的标记。如果经纬度不同，则只有被点击的聚合点会展开。

可以看看这个https://ask.csdn.net/questions/7888080