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

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

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