@react-google-maps/api库GoogleMap组件onClick事件与Marker交互异常问题

问题根因 #

你遇到的是旧版本@react-google-maps/api和谷歌地图JS API最新版的兼容问题：谷歌官方近期更新了地图JS API的底层事件交互逻辑，2.2.0版本的@react-google-maps/api没有适配该更新，会导致地图、Marker的所有交互事件失效。

解决方案 #

临时修复（无需修改业务代码） #

在useJsApiLoader配置中指定谷歌地图JS API的版本为3.54及以下的稳定版本即可恢复所有功能：

const { isLoaded } = useJsApiLoader({
  id: 'google-map-script',
  googleMapsApiKey: "你的应用API密钥",
  // 新增下面这行，指定旧版本API
  version: "3.54"
})

永久修复 #

将@react-google-maps/api升级到最新稳定版本，官方已经在新版本中完成了适配：

# npm
npm install @react-google-maps/api@latest
# yarn
yarn add @react-google-maps/api@latest
# pnpm
pnpm add @react-google-maps/api@latest

升级后需要核对项目中用到的其他地图组件属性是否有废弃变更，按需调整即可。

其他排查方向 #

如果上述方案无效，可以按以下顺序排查：

• 检查是否有全局CSS给地图容器或其子元素设置了pointer-events: none，该属性会拦截所有交互事件
• 检查是否有其他绝对定位的DOM元素覆盖在地图容器上方，可通过给地图容器设置较高的z-index值验证
• 打开浏览器控制台，检查谷歌地图JS API是否加载失败、是否有密钥权限报错

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