如何为 Google 地图指定自定义聚类标记

我有一个带有标记和聚类的谷歌地图。

我可以使用如下代码轻松更改标记图标：

marker = new google.maps.Marker({
    position: {
        lat: location_data.lat,
        lng: location_data.lng
    },
    map: map,
    icon: img_url + 'map-marker.svg',
});

但是，我一直坚持更改集群图标。此代码可以很好地进行实际的聚类：

const marker_clusterer = new markerClusterer.MarkerClusterer({
    map: map,
    markers: markers
});

我发现那里的代码表明了这一点：

const marker_clusterer = new markerClusterer.MarkerClusterer({
    map: map,
    markers: markers,
    renderer: {
        imagePath: img_url + 'map-cluster'
    }
});

Where map-cluster是一堆文件的前缀，例如map-cluster1.svg。这给了我错误：“未捕获的类型错误：e.renderer.render不是函数”。

我也尝试过这个：

const marker_clusterer = new markerClusterer.MarkerClusterer({
    map: map,
    markers: markers,
    renderer: {
        styles: [{
            url: img_url + 'map-cluster1.svg',
        }]
    }
});

为此我再次遇到同样的错误。

还有其他代码示例似乎与我已经使用的代码没有任何关系，大量自定义对象（例如https://gabrielwadi.medium.com/custom-cluster-marker-for-google-maps-how-to-8a7b858e2879 https://gabrielwadi.medium.com/custom-cluster-marker-for-google-maps-how-to-8a7b858e2879）。 API 文档只是指向这种无用的页面：https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer我想我没有正确指定自定义“渲染器”，但我发现的所有代码示例要么很简单并且不起作用（如上），要么太复杂以至于我不知道从哪里开始。

有人有任何指点吗？我正在参考https://maps.googleapis.com/maps/api/js https://maps.googleapis.com/maps/api/js作为我的主要 API 脚本，以及https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js用于聚类。

MarkerClusterer 期望与渲染方法的接口 https://googlemaps.github.io/js-markerclusterer/interfaces/Renderer.html:

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

new markerClusterer.MarkerClusterer({
  map,
  markers,
  renderer,
});