谷歌地图markerClusterer：如何在配置对象中组合Interface Renderer和GridOptions gridSize？

Question

我目前正在尝试在网站上实现 Google Maps JavaScript MarkerClusterer。

我正在使用 Interface Renderer 来覆盖几个默认配置参数。

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
};

let config = { map, markers, renderer };
let cluster = new markerClusterer.MarkerClusterer(config);

请注意，我通过 unpkg 添加markerClusterer 插件。所以我必须这样声明集群：

let cluster = new markerClusterer.MarkerClusterer(config);

（如官方文档的“安装”部分所述）（请参阅我上面代码的最后一行）。

这段代码效果很好，但我还想按顺序覆盖 Interface GridOptions 中的 gridSize 属性（好吧，我希望......我什至不确定这个选项会给我带来我所期望的结果；我不是英语母语和给定的描述对我来说并不完全清楚......）在我的地图上获得更大的集群和更少的单独标记。

我因以下几个原因而苦苦挣扎：

• 我不熟悉代码的设置方式，
• 该文档是空的，并且没有提供有关如何实现我想要的目标的示例代码，
• 找不到有关堆栈溢出、教程（博客、社交网络等）的任何帮助。确实，我能找到的只是 10 万种过时的方法，但是当您使用界面渲染器时，这些方法不起作用。这是一个例子：

var markerClusterer = new MarkerClusterer(map, markers, {
    gridSize: 10,
    maxZoom: 9, // maxZoom set when clustering will stop
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
});

所以我尝试了几件事，但没有任何效果：

let config = { map, markers, renderer, GridOptions: { gridSize: 10 } };

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
            gridSize: 10,
        }),
};

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
    
    GridOptions: ({ gridSize = 10 }),
    // gridSize: 10,
};

有人可以帮助我吗？谢谢！

Answer 1

最后：

let renderer = {
    render: ({ count, position }) =>
        new google.maps.Marker({
            label: {
                text: String(count),
                color: "transparent",
            },
            position,
            icon: {
                url: mapOperator.imageBasePath + "pin-cluster-1.png",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        }),
};
let algorithm = new markerClusterer.GridAlgorithm({gridSize: 60});

let config = { map, markers, renderer, algorithm };
let cluster = new markerClusterer.MarkerClusterer(config);

而且，是的，如果增加其值（默认值：40），gridSize 属性确实会在地图上生成更大的簇和更少的单个标记。

Answer 2

我认为最好使用SuperClusterAlgorithm而不是GridAlgorithm，Gridalgorithm使我的地图滞后很多并且缩放性能很差。

const algorithm = new markerClusterer.SuperClusterAlgorithm({ maxZoom: 12, radius: 80});

我还没有发现的是如何设置其他选项：

参考：https://github.com/googlemaps/js-markerclusterer/blob/68f10c5b0a7fe884cb927ff2b320fe78159a4f93/src/algorithms/supercluster.ts

constructor({ maxZoom, radius = 60, ...options }: SuperClusterOptions) {
super({ maxZoom });

this.superCluster = new SuperCluster({
  maxZoom: this.maxZoom,
  radius,
  ...options,
});

minPoints 例如...我无法使其工作。

new markerClusterer.SuperClusterAlgorithm({minPoints: 100})

Answer 3

回答@Ramstin：

由于

SuperClusterAlgorithm

是默认算法，您只需将算法选项作为对象传递即可。

const algorithm_options = {
  radius: 90,
};

const markercluster = new markerClusterer.MarkerClusterer(
  {
    map: map,
    markers: markers,
    algorithmOptions: algorithm_options,
  }
);