React项目中Google Maps Marker Clustering实现失败求助

1. 先处理依赖冲突 #

你同时引入了google-maps-react-markers和@react-google-maps/api，这两个库在Google Maps脚本加载逻辑上大概率冲突，直接导致聚类功能异常。建议只保留@react-google-maps/api——它的维护更活跃，官方适配的MarkerClusterer稳定性更好。

• 执行卸载命令清理多余依赖：

  npm uninstall google-maps-react-markers
  

• 删掉node_modules和package-lock.json（或yarn.lock），重新执行npm install确保依赖干净。

2. 纠正MarkerClusterer的使用姿势 #

别直接把已渲染的Marker包进MarkerClusterer里，正确的做法是把Marker作为MarkerClusterer的子组件，并且必须给每个Marker传递clusterer属性，同时确保position格式正确（要么是{lat: number, lng: number}对象，要么是Google Maps的LatLng实例）。

示例代码：

import { GoogleMap, MarkerClusterer, Marker } from '@react-google-maps/api';

const MapComponent = () => {
  // 模拟标记数据
  const markerList = [
    { id: 1, lat: 37.7749, lng: -122.4194 },
    { id: 2, lat: 37.7751, lng: -122.4196 },
    { id: 3, lat: 37.7753, lng: -122.4198 }
  ];

  return (
    <GoogleMap
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
      mapContainerStyle={{ width: '100%', height: '800px' }}
    >
      <MarkerClusterer>
        {/* 必须通过clusterer回调获取实例，传递给每个Marker */}
        {(clustererInstance) =>
          markerList.map(marker => (
            <Marker
              key={marker.id}
              position={{ lat: marker.lat, lng: marker.lng }}
              clusterer={clustererInstance}
            />
          ))
        }
      </MarkerClusterer>
    </GoogleMap>
  );
};

3. 修复Script Error #

这个错误90%是因为没加载markerclusterer库，或者Google Maps脚本加载顺序不对。用@react-google-maps/api的LoadScript组件包裹你的地图组件，一定要在libraries数组里加上markerclusterer：

import { LoadScript } from '@react-google-maps/api';
import MapComponent from './MapComponent';

const App = () => {
  return (
    <LoadScript
      googleMapsApiKey="你的Google Maps API密钥"
      libraries={['markerclusterer']} // 关键：必须加载这个库
    >
      <MapComponent />
    </LoadScript>
  );
};

4. 自定义Marker的适配 #

如果要用自定义样式的Marker，别完全重写组件，优先用Marker的icon属性自定义。如果必须用自定义组件，要确保它接受并传递clusterer属性给底层的Marker实例：

const CustomMarker = ({ clusterer, position, ...restProps }) => {
  return (
    <Marker
      clusterer={clusterer}
      position={position}
      // 自定义图标样式
      icon={{
        url: '/your-custom-marker.png',
        scaledSize: new window.google.maps.Size(32, 32)
      }}
      {...restProps}
    />
  );
};

内容的提问来源于stack exchange，提问作者G-Arthur