由于无法提供位置数据，无法在谷歌地图markclusterer中应用自定义图标进行聚类

Question

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

如果我不知道位置，如何将簇渲染在正确的位置？我可以访问道具_position上的属性stats，但这会引发错误：

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})