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

Question

我有一张 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'
    }
});

其中 map-cluster 是一堆文件的前缀，例如map-cluster1.svg。这给了我错误：'Uncaught TypeError: e.renderer.render is not a function'.

我也试过这个：

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). The API docs just point to this kind of unhelpful page: https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer 我想我没有指定自定义 'renderer' 正确，但我发现的所有代码示例要么简单且不起作用（如上），要么太复杂以至于我不知道从哪里开始。

有人指点一下吗？我正在引用 https://maps.googleapis.com/maps/api/js as my main API script, and https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js 进行聚类。

Answer 1

MarkerClusterer 期望 interface with a render method:

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

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

How to specify custom cluster marker for a Google map

google-maps