谷歌地图MarkerCluster如何个性化渲染器

Question

我将MarkerClusterer与谷歌地图api一起使用，我正试图用渲染器inerface更改标记的行为，正如他们在文档中所解释的那样：https://googlemaps.github.io/js-markerclusterer

问题是，我不懂医生。。。它说MarkerCluster类可以接受参数：

{
algorithm?: Algorithm;
map?: google.maps.Map;
markers?: google.maps.Marker[];
renderer?: Renderer;
onClusterClick?: onClusterClickHandler;
}

事实上，我可以在源代码中看到：https://github.com/googlemaps/js-markerclusterer/blob/1ee6469fa3c62a30c39cf509b379847741a7ebb9/src/markerclusterer.ts

我可以在这里看到DefaultRenderer的实现，它是renderer参数的默认值：https://github.com/googlemaps/js-markerclusterer/blob/1ee6469fa3c62a30c39cf509b379847741a7ebb9/src/renderer.ts

因此，在我的代码中，我认为应该使用一个名为render的方法创建一个对象，该方法返回一个new google.maps.Marker。我尝试了很多不同的变体，我在那里向你展示了一个，其中我对源代码进行了一些修改(标记簇的颜色(，我不知道我应该做什么才能使它发挥作用：

function init_map() {
let map = new google.maps.Map(document.getElementById("ljdp_map"), { zoom: 2, center: {lat:46.227638, lng:2.213749} });
let markers = [];
for (ev of events)   // events is defined outside this function
markers.push( new google.maps.Marker({ position: ev.coordinates, map: map }) );
// so, this is where I try to modify the cluster appearance, without luck
// maybe "my_renderer" need to be a class inheriting from DefaultRenderer ?
//   class my_renderer extends markerClusterer.DefaultRenderer {
// it didn't work
let my_renderer = {
render({ count, position }, stats) {
const svg = window.btoa(`
<svg fill="#00ff00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
<circle cx="120" cy="120" opacity=".6" r="70" /></svg>`);
return new google.maps.Marker({
position,
icon: {
url: `data:image/svg+xml;base64,${svg}`,
scaledSize: new google.maps.Size(45, 45),
},
title: `Cluster of ${count} markers`,
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
}
}
// since the render argument is the fourth, after an algorithm argument, in the constructor,
// maybe I need to create an algorithm object to place the renderer at the right position ?
//   let algorithm = new markerClusterer.SuperClusterAlgorithm({});
//   new markerClusterer.MarkerClusterer({ map, markers, algorithm, my_renderer });
// it didn't work
new markerClusterer.MarkerClusterer({ map, markers, my_renderer });
}

init函数调用时使用：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=ini_map"></script>

并且标记聚类库是由以下脚本添加的：

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

并且输出好像我没有添加my_renderer，集群没有个性化。我不知道我是走在正确的道路上，还是犯了错误，或者这不是修改集群的方式？

Answer 1

那么，看看另一篇so文章：谷歌地图标记聚类器：如何在配置对象中组合界面渲染器和GridOptions网格大小？

我发现了不起作用的地方：参数名称必须完全是renderer，而不是my_renderer(这解释了为什么参数的顺序无关紧要(

但我不知道为什么，也许这是打字的事情(我还不知道打字(？当我查看源代码时，我看不到它，但中有很多我不理解的地方

工作代码是相同的，除了对象名称：

function init_map() {
let map = new google.maps.Map(document.getElementById("ljdp_map"), { zoom: 2, center: {lat:46.227638, lng:2.213749} });
let markers = [];
for (ev of events)   // events is defined outside this function
markers.push( new google.maps.Marker({ position: ev.coordinates, map: map }) );
// this is where the error was : the object has to be named exactly 'renderer'
let renderer = {
render({ count, position }, stats) {
const svg = window.btoa(`
<svg fill="#00ff00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
<circle cx="120" cy="120" opacity=".6" r="70" /></svg>`);
return new google.maps.Marker({
position,
icon: {
url: `data:image/svg+xml;base64,${svg}`,
scaledSize: new google.maps.Size(45, 45),
},
title: `Cluster of ${count} markers`,
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
}
}
new markerClusterer.MarkerClusterer({ map, markers, renderer });
}

我不知道为什么：/

(我暂时将我的答案标记为解决方案，因为它有效，尽管我不知道为什么(