Google 地图标记不在 "Un-Clustering"

Question

我正在使用 Angular 4、Google Maps v3 和 Marker Clusterer v2 - 所以，基本上是每个库的最新版本。我正在尝试按照官方 Google 地图文档中的一个简单示例 (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);
}

在 init 上调用的这个函数只生成了一堆示例引脚：

  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 文件。

编辑：地图确实分解成更小的簇，只是没有分解成单独的图钉。

Answer 1

这不是 Angular 的问题。因为你有随机生成的纬度和经度函数。不知何故，它将有两个以上的标记非常接近另一个。然后 google 地图库无法区分这些。

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

据报道Github as well. See my plunker with only 1000 items and we can manage to see some of the markers, but the problem still persists. People suggest changing the max zoom of the map object. But it will depend on the map type. 您还可以在我的 plunker 的控制台上看到缩放级别。它可以进入的最大值是 22，即使我尝试用 48 破解。

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

引用问题。

This issue, along with many other limitations in the Google Maps API requiring workarounds forced our business away from Google Maps. We're now using Leaflet and Mapbox with great success.

Answer 2

记录您的位置，您可以看到您正在生成随机 lng/lat 到小数点后 0 位，因此对于 10,000 个位置，您将拥有完全相同的位置。 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;
  }

Answer 3

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

Google 地图标记不在 "Un-Clustering"

Google Map Markers not on "Un-Clustering"

google-maps

google-maps-api-3

markerclusterer

typescript

angular