React从Google Maps获取地址？#react

import React, { useEffect, useState } from 'react';

const MapComponent = () => {
  const [address, setAddress] = useState('');
  const [coordinates, setCoordinates] = useState(null);

  useEffect(() => {
    // 初始化地图
    const map = new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 0, lng: 0 },
      zoom: 8,
    });

    // 将地址转换为地理坐标
    const geocoder = new window.google.maps.Geocoder();
    geocoder.geocode({ address }, (results, status) => {
      if (status === 'OK') {
        setCoordinates(results[0].geometry.location);
      } else {
        console.error('Geocode was not successful for the following reason:', status);
      }
    });
  }, [address]);

  return (
    <div>
      <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} />
      <div id="map" style={{ height: '400px', width: '100%' }}></div>
      {coordinates && (
        <div>
          Latitude: {coordinates.lat()}
          <br />
          Longitude: {coordinates.lng()}
        </div>
      )}
    </div>
  );
};

export default MapComponent;