如何在react google map中基于最新lang lng获取地址

import React from 'react';
import GoogleMapReact from 'google-map-react';

const MapComponent = () => {
  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        // 设置Google地图的API密钥
        bootstrapURLKeys={{ key: 'YOUR_GOOGLE_MAPS_API_KEY' }}
        // 设置地图的初始中心位置和缩放级别
        defaultCenter={{ lat: 0, lng: 0 }}
        defaultZoom={10}
      >
        {/* 在这里添加其他地图组件或标记 */}
      </GoogleMapReact>
    </div>
  );
};

export default MapComponent;

import React, { useState } from 'react';
import GoogleMapReact from 'google-map-react';

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

  const handleApiLoaded = (map, maps) => {
    // 创建一个Geocoder对象
    const geocoder = new maps.Geocoder();

    // 根据经纬度获取地址信息
    geocoder.geocode({ location: { lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE } }, (results, status) => {
      if (status === 'OK') {
        if (results[0]) {
          // 获取第一个结果的地址
          setAddress(results[0].formatted_address);
        } else {
          setAddress('No results found');
        }
      } else {
        setAddress('Geocoder failed due to: ' + status);
      }
    });
  };

  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_GOOGLE_MAPS_API_KEY' }}
        defaultCenter={{ lat: 0, lng: 0 }}
        defaultZoom={10}
        // 在地图加载完成后调用handleApiLoaded函数
        onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
      >
        {/* 在这里添加其他地图组件或标记 */}
      </GoogleMapReact>
      <div>{address}</div>
    </div>
  );
};

export default MapComponent;