React Google Map：如何在InfoWindow中显示placeId对应的formatted_address

我来帮你搞定这个问题！你当前的代码里有个核心问题：你在Marker的JSX结构里直接执行了geocodeByPlaceId这个异步函数，但React的渲染是同步的——当InfoWindow渲染时，地址请求还没完成，自然没法把结果显示出来。咱们得用React的状态管理来解决这个异步渲染的问题，具体步骤如下：

1. 添加状态存储地址 #

首先在你的地图组件里，用useState来存储每个marker对应的地址，这样地址获取完成后能触发组件重新渲染：

import { useState, useEffect } from 'react';

function YourMapComponent(props) {
  // 用对象存储placeId和对应地址的映射
  const [markerAddresses, setMarkerAddresses] = useState({});

2. 按需获取地址（优化性能） #

咱们可以在用户点击激活某个marker时，再去请求对应的地址，避免一开始就加载所有marker的地址浪费资源。用useEffect监听activeKey的变化：

// 当激活的marker变化时，获取对应地址
  useEffect(() => {
    if (props.activeKey === null) return;
    
    const currentMarker = props.markers[props.activeKey];
    // 避免重复请求已经获取过的地址
    if (currentMarker.place_id && !markerAddresses[currentMarker.place_id]) {
      geocodeByPlaceId(currentMarker.place_id)
        .then(results => {
          const formattedAddress = results[0].formatted_address;
          setMarkerAddresses(prev => ({
            ...prev,
            [currentMarker.place_id]: formattedAddress
          }));
        })
        .catch(error => {
          console.error('获取地址失败:', error);
          // 可以在这里设置错误提示
          setMarkerAddresses(prev => ({
            ...prev,
            [currentMarker.place_id]: '无法获取地址'
          }));
        });
    }
  }, [props.activeKey, props.markers, markerAddresses]);

3. 修改InfoWindow渲染逻辑 #

现在在InfoWindow里，就可以从状态中取出对应的地址来显示了，还可以加个加载提示：

return (
    <GoogleMap /* 你的地图配置 */>
      {props.markers.map((marker, i) => (
        <Marker
          {...marker}
          key={i}
          position={marker.location}
          title={marker.title}
          icon={`icons/${marker.type}.png`}
          onClick={() => props.toggleLocationsActive(i)}
        >
          {i === props.activeKey && (
            <InfoWindow onCloseClick={props.onToggleOpen}>
              <div>
                <h3>{marker.title}</h3>
                {/* 显示地址，未加载完成时显示提示 */}
                <p>{markerAddresses[marker.place_id] || '正在加载地址...'}</p>
              </div>
            </InfoWindow>
          )}
        </Marker>
      ))}
    </GoogleMap>
  );
}

额外优化：预加载所有地址（可选） #

如果你的marker数量不多，也可以在组件初始化时就预加载所有地址，这样用户点击时地址已经准备好了：

useEffect(() => {
  props.markers.forEach(marker => {
    if (marker.place_id && !markerAddresses[marker.place_id]) {
      geocodeByPlaceId(marker.place_id)
        .then(results => {
          setMarkerAddresses(prev => ({
            ...prev,
            [marker.place_id]: results[0].formatted_address
          }));
        })
        .catch(error => console.error('获取地址失败:', error));
    }
  });
}, [props.markers, markerAddresses]);

注意事项 #

• 确保你正确导入了geocodeByPlaceId函数（通常来自react-google-maps或相关的Google Maps封装库）
• 注意Google Maps Geocoding API的请求配额，避免超过限制导致请求失败
• 可以根据需求调整加载提示或错误提示的样式，提升用户体验

内容的提问来源于stack exchange，提问作者Iwona Hajczewska