React组件中如何在.then外部使用Google地理编码API返回的坐标？

要在React组件中复用Geocoding API返回的坐标，核心是通过React状态存储坐标数据，再将状态传递给<GoogleMap>和<Marker>组件。具体实现步骤如下：

1. 定义状态存储坐标 #

使用useState钩子创建状态变量，用来保存解析后的坐标对象，初始值可以设为默认坐标或者null：

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

const MapComponent = ({ address }) => {
  // 初始化坐标状态，默认设为原点，可根据需求调整
  const [coordinates, setCoordinates] = useState({ lat: 0, lng: 0 });
  // 添加加载状态，处理数据未返回时的UI
  const [isLoading, setIsLoading] = useState(true);

2. 在useEffect中发起Geocoding请求 #

利用useEffect钩子，在组件挂载或address属性变化时调用API获取坐标，并更新状态：

useEffect(() => {
    const fetchCoordinates = async () => {
      try {
        const response = await fetch(
          `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${getEnv().APP_PUBLIC_GOOGLE_API_KEY}`
        );
        const data = await response.json();
        
        if (data.results && data.results.length > 0) {
          const location = data.results[0].geometry.location;
          setCoordinates(location); // 更新坐标状态
        } else {
          console.error('未找到对应地址的坐标');
          // 可选：处理地址无效的情况，比如设置默认坐标
        }
      } catch (error) {
        console.error('获取坐标失败:', error);
      } finally {
        setIsLoading(false); // 结束加载状态
      }
    };

    fetchCoordinates();
  }, [address]); // 当address变化时重新发起请求

注意：用encodeURIComponent处理地址参数，避免特殊字符导致的请求错误。

3. 将状态传递给地图和标记组件 #

把coordinates状态分别传给<GoogleMap>的center属性和<Marker>的position属性，同时处理加载中的状态：

if (isLoading) {
    return <div>加载地图中...</div>;
  }

  return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '400px' }}
      center={coordinates}
      zoom={14}
    >
      <Marker position={coordinates} />
    </GoogleMap>
  );
};

export default MapComponent;

关键说明 #

• 状态管理：通过useState存储坐标，确保组件能响应坐标变化重新渲染。
• 依赖项：useEffect的依赖数组包含address，保证地址更新时自动重新获取坐标。
• 错误处理：添加try/catch捕获请求异常，同时处理地址无匹配结果的情况，避免组件崩溃。

内容的提问来源于stack exchange，提问作者Peter Villaroman