百度地图、高德地图、天地图聚合状态下如何展示多个marker 的信息？

地图聚合功能里，如果两个坐标点完全一样，即使地图已经放大到最大了，这两个坐标点仍然是聚合图标，我们还是看不到这两个点的信息，怎么办？

下边的的代码都是 Angular 里使用的。其他语言的可以自己参考修改就能使用。

百度地图

百度地图的聚合需要修改 MarkerClusterer.js 这个开源聚合库的代码。

找到 Cluster.prototype.updateClusterMarker ,定位到这个方法的 this._clusterMarker.addEventListener 部分。 注意看下边代码注释的部分。

var thatMap = this._map;
var thatBounds = this.getBounds();
var thatMarkers = this._markerClusterer.getMarkers(); // 获取当时的 markers
this._clusterMarker.addEventListener("click", function (event) {
  // 增加一个自定义事件 clusterclick
  const event2 = new CustomEvent("clusterclick", {
    detail: thatMarkers,
    bubbles: true // 是否冒泡
  });
  // 在 window 对象里触发这个事件
  window.dispatchEvent(event2); // 注意先触发事件，之后再调整视野
  thatMap.setViewport(thatBounds);
});

然后我们就可以在调用百度地图的页面里，监听这个 clusterclick 事件，获取到 markers 的信息。

window.addEventListener('clusterclick', (e: any): any => {
        if (!this.$BMapObj) return false;
        // 如果是 已经放大到最大，但是有多个车辆聚合
        const nowZoom = this.$BMapObj.getZoom();
        const maxZoom = this.$BMapObj.getMapType().getMaxZoom();
        if (nowZoom < maxZoom) {
          return false;
        }
        const { detail } = e; // detail 就是 marker 的所有信息了
      });

高德地图

高德地图可以监听到聚合图标的 click 事件里处理。这个好处理。代码如下：

this.$aMapcluster = new AMap.MarkerClusterer(this.$aMapObj, $tmarks, { minClusterSize: 2 });

AMap.event.addListener(this.$aMapcluster, 'click', detail => {
  const { markers } = detail;
  // 如果当前缩放比例已经最大，坐标重合的终端弹框信息重新组织
  if (this.$aMapObj.getZoom() >= 18) {

  }
});

天地图

天地图需要覆盖clusterclick方法，然后变成自定义的。可以参考这个 github.com/SoulLyoko/v… 以下是我修改的代码

this.$TMapcluster = new T.MarkerClusterer(this.$TMapObj, { markers: markers, girdSize: 10, styles: styles }); // Object.values(this.$markerList)

Object.entries(this.$TMapcluster).forEach(([, val]) => {
if ((val as any).clusterclick) {
  (val as any).clusterclick.shift();
}
});
this.$TMapcluster.addEventListener('clusterclick', e =>this.onClusterclick(e));

onClusterclick(e) {
  // 地图进行放大
  if (this.$TMapObj.getZoom() < this.$TMapObj.getMaxZoom()) {
    this.$TMapObj.centerAndZoom(e.lnglat, this.$TMapObj.getZoom() + 1);
    return;
  }

  // 在地图放至最大时进行重复点位的展示
  const {
    layer
  } = e;
  // 1. 需要在layer中检索出 options.childCount
  let childCount = 0;
  Object.entries(layer).forEach(([, val]) => {
    // 天地图重新编译字段变量会有变化，所以使用对象遍历
    if (isObject(val) && !!(val as any).options) {
      childCount = (val as any).options.childCount || 0;
    }
  });
  // 2. 需要在layer中检索出重叠的点位
  let markerList = [];
  Object.entries(layer).forEach(([, val]) => {
    // 天地图重新编译字段变量会有变化，所以使用对象遍历
    if (Array.isArray(val) && childCount === val.length) {
      markerList = val;
    }
  });
  // 3. 当前聚合点位对应的点位列表
  // .... 处理 markerList 就可以了
}

以上，希望也帮到你了。