谷歌地图标记聚类出现问题

Question

在 React 项目中，我们有一个带有可交互标记的 Google Maps API，但我们未能在我们的项目上实现标记聚类。 进口：

import GoogleMap from "google-maps-react-markers";
import { MarkerClusterer } from "@react-google-maps/api";
import Marker from "./marker";

我们项目的 Google Map API 代码：

<div className="map-container" ref={mapRef}>
        <GoogleMap
          apiKey=
          defaultCenter={{ lat: 20, lng: 20 }}
          defaultZoom={14}
          onGoogleApiLoaded={onGoogleApiLoaded}
          onChange={onMapChange}
        >
          {renderedMarkers}
        </GoogleMap>
</div>

标记代码：

const renderedMarkers = filteredMarkersByTags.map(
    (
      { lat, lng, name, variant, email, description, image, date, tag, _id },
      index
    ) => {
      if (showMyEntries && email !== profile.email) {
        return null;
      }

      return (
        <Marker
          key={index}
          lat={lat}
          lng={lng}
          markerId={name}
          variant={variant}
          markerVariant={variant}
          markerDescription={description}
          markerEmail={email}
          markerDate={date}
          petImage={image}
          markerTags={tag}
          dbID={_id}
          onClick={onMarkerClick}
          className="marker"
        />
      );
    }
  );

当我们缩小时，标记仍然保持为个体，而不是聚集在一起以获得更清晰的观看体验，提前感谢可以提供帮助的 aynone

<MarkerClusterer 
   averageCenter enableRetinaIcons gridSize={60}>
   { renderedMarkers }
</MarkerClusterer>

我们尝试查看默认的聚类方法是否有效，因此尝试了此部分以查看它是否会对标记进行聚类。我们得到的唯一输出是这次尝试的“脚本错误”。

Answer 1

提到的

@react-google-maps/api

库的文档不够详细。我找到了带有标记聚类器的示例，我认为

renderedMarkers

应该是一个函数，并且看起来如下：

(clusterer) => (
  <>
    {filteredMarkersByTags.map(
    ({ lat, lng, name, variant, email, description, image, date, tag, _id }, index) => {
      if (showMyEntries && email !== profile.email) {
        return null;
      }

      return (
        <Marker
          key={index}
          lat={lat}
          lng={lng}
          clusterer={clusterer}
          position={{lat: lat, lng: lng}}
          markerId={name}
          variant={variant}
          markerVariant={variant}
          markerDescription={description}
          markerEmail={email}
          markerDate={date}
          petImage={image}
          markerTags={tag}
          dbID={_id}
          onClick={onMarkerClick}
          className="marker"
        />
      );
    }
  )}
  </>
)

注意两个新属性

clusterer

和

position

（在提到的示例中，Marker接收位置对象而不是两个单独的参数

lat

和

lng

）。

如果没有帮助，我建议使用官方

@googlemaps/markerclusterer

库。这是文档