谷歌地图标记不在“非聚类”上答案

【问题标题】：Google Map Markers not on "Un-Clustering"谷歌地图标记不在“非聚类”上
【发布时间】：2017-12-12 05:44:16
【问题描述】：

我正在使用Angular 4、Google Maps v3 和标记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);
}

在 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，代码 sn-ps 来自app.ts 文件。

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

【问题讨论】：

您是否尝试过使用正确的集群标记图像来执行此操作？我认为可能存在尝试加载集群标记图像但由于缺少文件而崩溃的问题。
我会试试 /post length

标签： angular google-maps typescript google-maps-api-3 markerclusterer

【解决方案1】：

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

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

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

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

引用问题。

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

【讨论】：

酷，感谢您的回答。将在临近到期时奖励赏金。
@VSO 要查看集群的工作情况，您也应该使用 markercluster options，例如 {gridSize: 50, maxZoom: 15}。
@RWAM 只需尝试 maxZoom: 15 并且可以在单击集群时设法看到一个标记。我真的不知道，谢谢指出-> VSO：请检查它是否符合您的期望。我可以看到标记，但只有一个。

【解决方案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;
  }

【讨论】：

【解决方案3】：

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

【讨论】：