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

Question

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

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

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. 这给了我错误：“未捕获的类型错误：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-地图-如何-8a7b858e2879）。API文档只是指向这种无用的页面： https: //googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer我想我没有正确指定自定义“渲染器”，但所有我发现的代码示例要么简单且不起作用（如上），要么太复杂以至于我不知道从哪里开始。

有人有任何指点吗？我引用https://maps.googleapis.com/maps/api/js作为我的主要 API 脚本，并引用https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js进行聚类。

Answer 1

MarkerClusterer 需要一个带有 render 方法的接口：

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

Answer 2

通过更新 @jpoehnelt 的第一个答案来更改默认图标

          const svg = window.btoa(`
                <svg fill="#edba31" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
                <circle cx="120" cy="120" opacity="1" r="70" />
                <circle cx="120" cy="120" opacity=".7" r="90" />
                <circle cx="120" cy="120" opacity=".3" r="110" />
                <circle cx="120" cy="120" opacity=".2" r="130" />
                </svg>`);

         const renderer = {
            render: ({ count, position }) =>

              new google.maps.Marker({
                label: { text: String(count), color: "#263184", fontSize: "14px", fontWeight: "600" },
                icon: {
                    url: `data:image/svg+xml;base64,${svg}`,
                    scaledSize: new google.maps.Size(45, 45),
                  },
                position,
                // adjust zIndex to be above other markers
                zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
              })

        };

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