我正在使用Angular 4Google Maps v3和Marker Clusterer v2-因此,实质上是每个库的最新版本。我正在尝试遵循一个简单的示例(https://developers.google.com/maps/documentation/javascript/marker-clustering),该示例在官方Google Maps文档中找到,以使我的标记成簇且不成簇。

初始化 map ,这里没什么特别的:

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

编辑: map 不会解散成较小的群集,只是不会解散成单独的针脚。

最佳答案

记录您的位置,您会看到您正在生成一个随机的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;
  }

10-05 20:44
查看更多