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

Question

我正在将 MarkerClusterer 与谷歌地图 API 一起使用，我正在尝试使用渲染器界面更改标记的行为，正如他们在文档中解释的那样：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

所以，看看另一篇SO帖子：Google MapsmarkerClusterer：如何在配置对象中组合Interface Renderer和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 });
}

我不知道为什么:/

（我会将我的答案标记为暂时的解决方案，因为它有效，即使我没有解释原因）

Answer 2

解决方案是这一行：

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

这条线实际上是什么：

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

但是解构是隐藏的。

如果你想调用渲染器 my_renderer 那么你应该将该行修改为：

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

它应该按预期工作。