谷歌地图MarkerClusterer自定义聚合图标无法获取position参数如何解决

问题修复方案 #

你代码里的问题出在三个地方，对应修改即可：

1. render回调的入参定义错误：render方法接收的第一个参数是单个Cluster实例，不是聚合数组，你需要的聚合中心点坐标直接从该实例的position属性获取即可，不需要自行计算。
2. 你之前尝试从stats参数取位置是找错了对象，stats仅存储聚合统计数据（如聚合包含的标记数、聚合层级等），不包含位置信息。
3. 你写的render回调加了大括号但没有手动返回值，导致回调返回undefined，库尝试给返回的标记绑定事件时就会抛出Cannot read properties of undefined (reading 'addListener')错误。

修正后代码 #

private createClusteredMarkerMap() {
  new this._GoogleMaps.load((google) => {
    let map = new google.maps.Map(this._map, mapOptions);
    const markers = this._locations.map(({ lat, long }) => {
      // 原有逻辑：循环提取经纬度生成普通marker
    });

    new markerClusterer.MarkerClusterer({
      map,
      markers,
      renderer: {
        // 要么去掉大括号隐式返回，要么加return手动返回
        render: (cluster, stats) => this.testRenderer(cluster, stats)
      }
    });
  });
}

private testRenderer(cluster, stats) {
  const svg = // 你的svg生成逻辑保持不变
  return new google.maps.Marker({
    // 直接取cluster实例预计算好的聚合中心点坐标
    position: cluster.position,
    icon: {
      url: `data:image/svg+xml;base64,${svg}`,
      scaledSize: new google.maps.Size(45, 45),
    },
    label: {
      text: String(stats.count),
      color: "rgba(255,255,255,0.9)",
      fontSize: "12px",
    },
  });
}

内容的提问来源于stack exchange，提问作者crevulus