在一个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>

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