反应谷歌地图 - 标记和标记聚类器的问题答案

【问题标题】：React googlemaps - issue with marker & marker clusterer反应谷歌地图 - 标记和标记聚类器的问题
【发布时间】：2020-09-26 06:19:03
【问题描述】：

所以我正在使用https://www.npmjs.com/package/@react-google-maps/api，我想在我的应用程序中添加一个标记聚类器。我尝试使用库提供的 Marker 和 MarkerClusterer 标签，但是因为我必须映射大约 9000 个对象的数组并为每个对象创建一个标记，这导致了堆栈错误。 ERROR MESS HERE。下面的代码（dealers 基本上是包含 9000 个对象的数据库）：

<MarkerClusterer
  imagePath={"../pics/markerClustererImages/m"}
  gridSize={90}
  title={"Click to zoom"}
  maxZoom={13}
  minimumClusterSize={3}
  onLoad={() => {
    mapInstance.fitBounds(mapBounds);
  }}
>
  {(clusterer) =>
    dealers.map((dealer) => (
      <Marker
        key={dealer.id}
        position={{ lat: dealer.content.lat, lng: dealer.content.lng }}
        clusterer={clusterer}
        onLoad={(marker) => {
          mapBounds.extend({
            lat: marker.position.lat(),
            lng: marker.position.lng(),
          });
          marker.addListener("click", () => {
            mapInstance.panTo(marker.getPosition());
            props.handleMarkerOnClick(dealer);
          });
        }}
      />
    ))
  }
</MarkerClusterer>

这只会产生某种预期的结果。 Result here。视觉效果很好，但我需要动态过滤所有这些标记（我有一个自动完成搜索和国家选择过滤器）。因此，我将经销商数据库保存在 Redux 商店中。但是，当我对 dealers “状态”进行任何更改时，它就崩溃了。我试图找到不同的解决方案，但不幸的是，我发现库本身并不擅长处理大量标记。

这就是我决定尝试使用原生 Google API 的原因。（markersInfo 与上例中的经销商数据字面上相同，只是重命名）

let markers = [];
markersInfo.map((dealer) => {
  let latLng = new window.google.maps.LatLng(
    dealer.content.lat,
    dealer.content.lng
  );
  let marker = new window.google.maps.Marker({
    position: latLng,
  });
  marker.addListener("click", () => {
    // handleMarkerOnClick(dealer);
    // map.setZoom(8);
    map.panTo(marker.getPosition());
  });
  markers.push(marker);
});
const markerCluster = new MarkerClusterer(map, markers, {
  imagePath:
    "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
});

这在 2 个不同的级别上失败了。首先，我无法按照谷歌的建议将 imagePath 设置为本地保存的图像，其次，集群已损坏。 Visual as to how here: 如您所见，数字未显示在图片的中心。文档对于为什么或如何发生这种情况并不是很具体。所以我想问一下是否有人对如何解决这个问题有任何提示。

【问题讨论】：

标签： javascript reactjs google-maps-api-3 markerclusterer

【解决方案1】：

对于损坏的集群图标（ClusterMarkerPlus 版本），您可以通过创建 MarkerClustererOptions 并定义样式来设置它们的样式，您可以将 anchorText 和 anchorIcon 调整为您的链接并将选项设置为您的集群。

export class MyCustomClusterIconStyle implements ClusterIconStyle { 
  anchorText: [number, number] = [14, 0]; 
  anchorIcon?: [number, number]; 
  //...etc
}

【讨论】：

【解决方案2】：

我自己设法解决了。我不得不使用旧版本的 markerclusterer (nonplusversion)，实际上 Google 文档本身并不推荐这种方式。对我有用的包链接如下： https://www.npmjs.com/package/@google/markerclusterer 希望有一天有人会发现这对您有所帮助。

【讨论】：