如何使用Google Region Lookup API？React集成失败求助

1. 先确认实验性特性已启用 #

在Google Cloud控制台中：

• 找到你的项目，进入Maps JavaScript API页面
• 切换到实验性特性标签，启用Region Area Lookup（DDS Boundaries）
• 确保你的API密钥已绑定该项目，且Maps JavaScript API本身处于启用状态

2. 检查API加载参数 #

该实验性特性仅在beta版本的Maps JS API中可用，且必须加载dds库：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=dds&v=beta"></script>

如果用React的@react-google-maps/api，要在LoadScript组件中配置对应的参数（见下文）。

3. React(TypeScript)项目集成示例 #

如果使用@react-google-maps/api，注意配置libraries和version，并正确初始化Region Lookup：

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

const RegionLookupMap = () => {
  const mapRef = useRef<google.maps.Map | null>(null);

  useEffect(() => {
    if (!mapRef.current) return;

    // 初始化Region Lookup实例
    const regionLookup = new google.maps.dds.RegionLookup({
      map: mapRef.current,
      // 指定需要识别的区域层级，比如ADMIN0=国家，ADMIN1=州/省
      regionTypes: ['ADMIN1', 'ADMIN2'],
    });

    // 监听区域选中事件
    regionLookup.addListener('regionselected', (event) => {
      console.log('选中区域详情:', event.region);
      // 这里可以处理选中后的逻辑，比如展示区域名称、边界等
    });

    // 组件卸载时清理实例
    return () => {
      regionLookup.setMap(null);
    };
  }, []);

  return (
    <LoadScript
      googleMapsApiKey="你的API密钥"
      libraries={['dds']}
      version="beta"
    >
      <GoogleMap
        ref={mapRef}
        center={{ lat: 39.9042, lng: 116.4074 }} // 示例中心点：北京
        zoom={7}
        mapContainerStyle={{ width: '100%', height: '500px' }}
      />
    </LoadScript>
  );
};

export default RegionLookupMap;

注：TypeScript可能会提示google.maps.dds类型不存在，可临时用// @ts-ignore跳过，或手动扩展类型定义。

4. 纯JavaScript项目调试示例 #

确保脚本加载顺序正确，避免DOM未就绪或API未加载完成就初始化：

<div id="map" style="width: 100%; height: 500px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=dds&v=beta&callback=initMap" async defer></script>
<script>
let map;
let regionLookup;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 39.9042, lng: 116.4074 },
    zoom: 7,
  });

  // 初始化Region Lookup
  regionLookup = new google.maps.dds.RegionLookup({
    map: map,
    regionTypes: ['ADMIN1'],
  });

  // 绑定事件监听
  regionLookup.addListener('regionselected', (event) => {
    alert(`选中区域：${event.region.displayName}`);
  });
}
</script>

5. 常见问题排查 #

• 打开浏览器控制台，检查是否有API密钥错误（如权限不足、密钥无效）
• 确认Google Cloud控制台中Maps JavaScript API的配额未耗尽
• 必须使用v=beta版本，稳定版本不支持该实验性特性
• regionTypes参数必须使用文档规定的有效值（如ADMIN0、ADMIN1等，不能自定义）

内容的提问来源于stack exchange，提问作者Martin Gaucher