谷歌地图集群不会分隔彼此靠近的标记以供 infoWindow 显示信息

Posted 2023-03-28

【中文标题】谷歌地图集群不会分隔彼此靠近的标记以供 infoWindow 显示信息

【英文标题】：Google Map cluster does not separate markers that are close to each other for infoWindow to display info

【发布时间】：2021-03-02 11:04:55

【问题描述】：

我有几个标记彼此靠近但我无法将其分开以显示信息窗口的情况。如何从集群中分离出标记（在这种情况下是标记 A 和 B）

这是地图的示例代码和视图。您可以看到 D 和 C 是更远的标记，因此是分开的。但是A和B不能分开。我该如何解决这个问题。

https://jsfiddle.net/t9kdqfwx/

const locations = [
   lat: -31.56391, lng: 147.154312 ,  <-- A close to B
   lat: -31.56391, lng: 147.154323 ,  <-- B close to A
   lat: -33.66231, lng: 150.254312 ,
   lat: -33.69391, lng: 143.254312 , 
];

这是我对标记进行聚类的方法：

  new MarkerClusterer(map, markers_vars, 
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  );

【参考方案1】：

您需要自定义您的gridSize。对于发布的代码，我发现30 可以工作并显示分隔标记。

new MarkerClusterer(map, markers_vars, 
  imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  gridSize: 30
);

相关文档：https://googlemaps.github.io/v3-utility-library/interfaces/_google_markerclustererplus.markerclustereroptions.html#gridsize

这是我制作的一个小工具，可以测试minimumClusterSize 和gridSize：http://jsfiddle.net/upsidown/2qdvjc4j/