如何为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-maps-how-to-8a7b858e2879）。API文档只指向这种无用的页面：https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer 我猜我没有正确指定自定义 'renderer'，但我找到的所有代码示例要么太简单不起作用（如上所述），要么过于复杂，我不知道从哪里开始。

请问是否有人有任何指针？我将https://maps.googleapis.com/maps/api/js作为我的主API脚本，并将https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js用于聚类。

- Steve Taylor

---

请告诉我我的回答是否有帮助！ - jpoehnelt

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

- jpoehnelt

---

谢谢，非常完美！我有点儿傻，从你的示例中删除了标签、位置、zIndex等部分，因为我认为我只需要更改图标。但是所有这些部分都似乎是必要或有用的 - 给其他人一个提示，保留示例代码，只需添加icon:'path/to/img.svg'就行了。 - Steve Taylor

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

- infomasud

Answer 3

var renderer = {render: ({ count, position }) => {
  var mark = new google.maps.Marker({
    label: { text: String(count), color: "white", fontSize: "15px", fontWeight: "bold", textAlign: "center", width: "100%"},
      icon: markerIconManual,
      position: position,
      map: this.map,
      // adjust zIndex to be above other markers
      zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
    });
    mark.addListener("click", () => {
      console.log("markmarkmarkmark");
      map.setZoom(16);
    });

    return mark;
  }
};

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

- luat ngoc