无法在 google maps markerclusterer 中应用自定义图标进行聚类，因为无法提供 position 数据

Question

该实用程序的文档对我来说毫无意义。 根据this和this ，您可以通过首先通过MarkerClusterer的renderer属性将集群图标转换为标记来自定义集群图标，然后像普通标记一样应用图标 styles。 但是， new google.maps.Marker需要一个position属性才能工作——一个“我无权访问的属性”。 我可以访问各个标记位置的各个位置，但使用标记聚类功能的全部意义在于为您计算一个中点。

如果我不知道 position，如何在正确的 position 中呈现集群？ 我可以访问stats道具上的_position属性，但这会引发错误：

Cannot read properties of undefined (reading 'addListener')

我真的不知道在这里做什么，因为那里似乎没有很多可靠的例子。 据我所知，我正在按照他们的 github中列出的示例进行操作。

private createClusteredMarkerMap() {
  new this._GoogleMaps.load((google) => {
    let map = new google.maps.Map(this._map, mapOptions);
    const markers = this._locations.map(({ lat, long }) => {
      // loop and extract lat/lng
    });

    new markerClusterer.MarkerClusterer({
      map,
      markers,
      renderer: {
        render: (clusters, stats) => {this.testRenderer(clusters, stats)} // trying to edit the icons here
      }
    });
  });
}

private testRenderer(clusters, stats) {
  const svg = // create svg here
  return new google.maps.Marker({
// position is required here but I don't have that value
    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",
    },
  });
}

Answer 1

const renderer = {
  render({ count, position }) {
    return new google.maps.Marker({
      label: { text: String(count), color: "white", fontSize: "12px" },
      position,
      icon: "url to the file",
      // adjust zIndex to be above other markers
      zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
    })
  }
}

// pass your function to the markerCluster constructor
const cluster = new MarkerClusterer({map, markers, renderer})

Answer 2

缺少有关render方法的return语句。 全场击掌。