如何使用@react-google-maps/api让地图居中并打开指定POI？

可以实现定位到谷歌地图原生POI并打开其自带信息框的效果，核心是借助谷歌地图Places API（需确保你的API密钥已启用该服务），通过POI的唯一Place ID而非单纯坐标来触发原生信息展示。以下是具体实现方案：

核心思路 #

• 替换坐标为POI的Place ID：每个POI都有唯一的Place ID，可通过谷歌地图官网查询获取。
• 调用Places API获取POI详情：包括位置、名称、地址等信息，用于地图居中定位。
• 模拟原生POI信息框：通过谷歌地图的InfoWindow组件加载POI详情，还原原生信息框的展示效果。

修改后的代码示例 #

import { useState, useCallback } from 'react';
import { GoogleMap, useJsApiLoader, usePlacesService } from '@react-google-maps/api';

// 替换为你的POI Place ID和对应名称
const poiLocations = {
  location1: { placeId: 'PLACE_ID_1', name: 'POI名称1' },
  location2: { placeId: 'PLACE_ID_2', name: 'POI名称2' }
};

const Example = () => {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: API_KEY,
    libraries: ['places'] // 必须加载places库
  });

  const [mapCenter, setMapCenter] = useState({ lat: 1, lng: 1 }); // 初始默认坐标
  const [infoWindow, setInfoWindow] = useState(null);
  let mapInstance = null;

  // 获取PlacesService实例
  const placesService = usePlacesService();

  const handlePoiClick = useCallback((poi) => {
    if (!placesService || !mapInstance) return;

    // 请求POI详细信息
    placesService.getDetails({ placeId: poi.placeId }, (place, status) => {
      if (status === window.google.maps.places.PlacesServiceStatus.OK && place) {
        // 地图居中到POI位置
        setMapCenter(place.geometry.location);
        
        // 关闭之前的信息框
        if (infoWindow) infoWindow.close();
        
        // 创建并打开模拟原生样式的信息框
        const newInfoWindow = new window.google.maps.InfoWindow({
          content: `
            <div style="padding: 8px;">
              <h3 style="margin: 0 0 8px 0; font-size: 16px;">${place.name}</h3>
              <p style="margin: 0 0 8px 0; font-size: 14px; color: #666;">${place.formatted_address}</p>
            </div>
          `
        });
        setInfoWindow(newInfoWindow);
        newInfoWindow.open(mapInstance, place.geometry.location);
      }
    });
  }, [placesService, infoWindow]);

  if (!isLoaded) return <div>加载中...</div>;

  return (
    <>
      <GoogleMap 
        zoom={15} 
        center={mapCenter}
        onLoad={(map) => mapInstance = map} // 保存地图实例用于打开信息框
        style={{ height: '400px', width: '100%' }}
      />
      
      <button onClick={() => handlePoiClick(poiLocations.location1)} style={{ margin: '8px' }}>
        {poiLocations.location1.name}
      </button>
      <button onClick={() => handlePoiClick(poiLocations.location2)} style={{ margin: '8px' }}>
        {poiLocations.location2.name}
      </button>
    </>
  );  
};

export default Example;

关键注意事项 #

• 确保API密钥已启用Places API和Maps JavaScript API，否则会出现请求失败的情况。
• Place ID获取方式：打开谷歌地图中目标POI的详情页，点击「分享」→「嵌入地图」，复制URL中place_id=后面的字符串即为该POI的Place ID。
• 若要完全还原谷歌原生POI信息框的交互逻辑，可自行扩展，但需遵守谷歌地图的使用条款。

内容的提问来源于stack exchange，提问作者Griffin Stout