谷歌地图标记不在“未聚合”状态下

Question

我正在使用Angular 4，Google Maps v3和Marker Clusterer v2 - 因此，基本上是每个相应库的最新版本。我试图遵循在官方Google Maps文档中找到的一个简单示例（https://developers.google.com/maps/documentation/javascript/marker-clustering）来使我的标记聚集和取消聚集。

初始化地图，这里没有什么特别的：

public ngOnInit(): void {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.85, lng: -87.65}
  });
  this.generateMockPinResultsResponse(10000, map);
}

这个函数在初始化时生成一组样本标记：

  public generateMockPinResultsResponse(nMarkers, map): void {
    let component = this;
    var markers = [];
    for (var i = 0; i<nMarkers; i++){
      let latitude: number = this.getRandomUsLat();
      let longitude: number = this.getRandomUsLng();
      var marker = new google.maps.Marker({
        position: { lat: latitude, lng: longitude },
        map: map
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);//
  }

上述代码就是我所知道的所有相关代码。我的标记确实聚类在一起，但不会解除聚类，我不明白为什么。这里是我半成品的代码：PLUNK，代码片段来自app.ts文件。

编辑：地图会将聚类解除成更小的聚类，但不会解除为单个图钉。

- VSO

---

你尝试使用正确的聚类标记图像来完成这个任务了吗？我认为可能存在一个问题，即它尝试加载聚类标记图像，但由于缺少文件而崩溃。 - Z. Bagley

我会尝试/post长度。 - VSO

Answer 1

这不是Angular的问题。因为您有用于经度和纬度的随机生成函数。某种情况下，会有两个或更多的标记非常接近。然后，Google地图库无法区分它们。

https://embed.plnkr.co/Ww4N71vKe6IUZjHFPLKo/

这个问题也在Github上有报道。看看我只有1000个项目的plunker，我们可以设法看到一些标记，但问题仍然存在。人们建议更改地图对象的最大缩放比例。但这将取决于地图类型。您还可以在我的plunker控制台上看到缩放级别。即使我尝试使用48进行黑客攻击，它最多只能达到22。

如果您的真实数据需要支持非常接近的标记聚类，则可能需要查看Leaflet。

引用问题。

这个问题以及Google Maps API中的许多其他限制需要解决方案迫使我们的业务远离Google Maps。我们现在正在使用Leaflet和Mapbox，并取得了巨大成功。

- trungk18

---

很棒，感谢你的回答。我会在接近过期时授予奖励。 - VSO

@VSO 要看聚类的工作原理，您应该尝试使用标记聚类选项，例如{gridSize: 50, maxZoom: 15}。 - RWAM

@RWAM，我刚尝试了maxZoom: 15，成功地在点击聚合时看到了一个标记。我之前并不知道这个，感谢你指出来。 -> VSO：请检查一下是否符合您的期望。我能看到标记，但只有一个。 - trungk18

Answer 2

记录你的位置，你会发现你正在生成一个0位小数的随机经度/纬度，所以在10000个位置中，你将有完全重复的位置。 http://plnkr.co/edit/FWRdHXd2tJbOIRzrvBZj?p=preview

const positions = markers.map(marker => {
  const position = marker.getPosition();

  return {
    lat: position.lat(),
    lng: position.lng(),
})

console.log(positions);

将生成器更新为制作更好（保留4位小数）的随机位置，我们可以看到它解决了这个问题：http://plnkr.co/edit/vMkjrSYqeYoaN4lRRyHa?p=preview

public getRandomInRange (from, to, fixed) {
    return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
  }

  private getRandomUsLat(){
    let max = 48;
    let min = 30;
    let num = this.getRandomInRange(min, max, 4);

    return num;
  }

  private getRandomUsLng(){
    let max = -70;
    let min = -110;
    let num = this.getRandomInRange(min, max, 4);
    return num;
  }

- Paul Thomas

Answer 3

以下来自谷歌的示例可能会对您有所帮助，特别是 uncluster 函数： https://github.com/googlemaps/js-marker-clusterer

- Nick B