如何使用google-map-react添加集群？

import GoogleMapReact from 'google-map-react';

const Map = () => {
  const center = {
    lat: 37.7749,
    lng: -122.4194
  };

  const zoom = 10;

  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        {/* 在这里添加集群 */}
      </GoogleMapReact>
    </div>
  );
};

npm install react-google-maps

import { MarkerClusterer } from 'react-google-maps';

const Map = () => {
  // ...

  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        <MarkerClusterer
          averageCenter
          enableRetinaIcons
          gridSize={60}
        >
          {/* 在这里添加Marker组件 */}
        </MarkerClusterer>
      </GoogleMapReact>
    </div>
  );
};

import { Marker } from 'react-google-maps';

// ...

<MarkerClusterer
  averageCenter
  enableRetinaIcons
  gridSize={60}
>
  <Marker
    lat={37.7749}
    lng={-122.4194}
    text="Marker Text"
  />
  {/* 添加更多的Marker组件 */}
</MarkerClusterer>