谷歌地图标记聚类器:如何在配置对象中组合界面渲染器和GridOptions网格大小

Question

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

我正在使用接口渲染器来覆盖几个默认配置参数。

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而不是GridAlgorithms，因为GridAlgorgorithm会使我的地图滞后很多，缩放性能也很差。

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