使用react-google-maps实现点击地图动态高亮国家或次国家级行政区方案咨询

无需额外对接第三方API，直接使用Google Maps Platform自带的能力即可实现需求，具体实现步骤如下：

核心实现步骤 #

• 绑定地图点击事件获取经纬度
  在react-google-maps的<GoogleMap>组件上绑定点击回调，直接获取用户点击位置的坐标：
  const handleMapClick = (e) => { const clickLatLng = e.latLng.toJSON() }
• 反向地理编码匹配对应行政区
  实例化google.maps.Geocoder，调用reverseGeocode方法传入点击坐标，同时指定resultType参数匹配你需要的行政级别：
  • 国家级别：传入country
  • 次国家级（省/州）：传入administrative_area_level_1
    请求成功后即可拿到对应行政区的唯一标识place_id、行政区名称等基础信息。
• 拉取边界坐标并渲染高亮
  调用google.maps.places.PlacesService的getDetails方法，传入上一步拿到的place_id，请求字段指定为geometry，接口会返回该行政区的完整多边形边界坐标集合。
  将坐标集合传入react-google-maps的<Polygon>组件，自定义填充色、边框透明度等样式即可实现高亮效果。每次用户点击新位置时，清空或更新之前的多边形实例即可。

备选优化方案 #

如果应用对接口调用成本敏感，或者需要支持离线使用，可以提前下载公开的全球/指定地区行政边界GeoJSON数据集，本地实现点在多边形内的坐标判断逻辑，无需每次调用谷歌接口，缺点是会增加前端包体积，更适合仅需要覆盖特定区域的场景。

注意事项 #

• 谷歌地图相关接口有调用配额限制，需要在谷歌云后台做好配额和异常处理，避免超量产生费用
• 不同地区的次国家级行政区边界覆盖度存在差异，上线前需要针对目标使用区域做兼容性测试
• 如果需要支持多级行政区切换高亮，只需调整反向地理编码时resultType的优先级顺序即可

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