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

Question

我使用MarkerClusterer和google，我试图用渲染器来改变标记的行为，就像它们在doc：https://googlemaps.github.io/js-markerclusterer中解释的那样

问题是我不明白医生..。它说MarkerClusterer类可以接受参数：

{
    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的实现，它是呈现器参数的默认值：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

所以，看看另一篇这样的文章：Google :如何将接口渲染器和GridOptions gridSize结合在配置对象中？

我发现了不起作用的地方:参数名必须是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 });
}

我不知道为什么

(我会把我的答案标记为目前的解决方案，因为它是可行的，尽管我不知道为什么)