React googlemaps-标记和标记聚类器出现问题

Question

所以我正在使用https://www.npmjs.com/package/@react-google-maps/api，我想在我的应用程序中添加一个标记聚类器。我尝试使用该库提供的Marker和MarkerClusterer标记，但是由于必须映射约9000个对象的数组并为每个对象创建一个标记，因此导致了堆栈错误。ERROR MESS HERE。下面的代码（经销商基本上是具有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“ state”进行任何更改时，它崩溃了。我试图找到不同的解决方案，但不幸的是，我发现该库本身并不擅长处理大量标记。

这就是为什么我决定尝试使用本机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个不同级别上均失败。首先，我无法按照google的建议将imagePath设置为本地保存的图像，其次，群集已损坏。Visual as to how here:如您所见，数字未显示在图片的中央。文档不是很具体说明为什么或如何发生这种情况。因此，我想问问是否有人对如何解决此问题有任何提示。

所以我正在使用https://www.npmjs.com/package/@react-google-maps/api，我想在我的应用程序中添加标记群集器。我尝试使用该库提供的Marker和MarkerClusterer标签，...

Answer 1

我设法自己解决了。我必须使用旧版本的markerclusterer（nonplusversion），实际上Google文档本身不建议这样做。对我有用的软件包在下面链接：https://www.npmjs.com/package/@google/markerclusterer希望有一天某人会对此有所帮助。