Question

我正在使用Angular 4，Google Maps v3和标记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的问题。因为你有随机生成的lat和long函数。不知何故，它将有两个以上的标记非常接近另一个。然后谷歌地图库无法区分这些。

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

也在Github报道了。看到我的plunker只有1000个项目，我们可以设法看到一些标记，但问题仍然存在。人们建议更改地图对象的最大缩放比例。但它会depend on the map type.您还可以在我的plunker控制台上看到缩放级别。它可以达到的最大值是22，即使我试图破解48。

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

引用该问题。

此问题以及Google Maps API中的许多其他限制需要解决方法迫使我们的业务远离谷歌地图。我们现在使用Leaflet和Mapbox取得了巨大的成功。

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

谷歌地图标记不在“取消群集”

3 个答案: