Flutter WebView中点击按钮无法显示Google Map问题求助

第一步：确认按钮点击是否触发 #

• 在网站按钮的点击事件中添加console.log('按钮点击触发')，然后通过WebView调试工具查看控制台输出：
  • Android：用Chrome远程调试（chrome://inspect）连接设备查看
  • iOS：用Safari开发者工具连接设备查看
• 若有日志输出，说明点击已响应，问题出在地图加载环节；若无输出，检查WebView配置：
  • Android：确保已开启setJavaScriptEnabled(true)，且WebViewClient的shouldOverrideUrlLoading没有拦截非跳转类的点击事件
  • iOS：确保WKWebViewConfiguration中allowsJavaScript设为true，没有通过WKNavigationDelegate拦截点击逻辑

第二步：排查Google Map加载问题 #

如果点击已触发，按以下方向排查：

• API密钥验证：确认使用的是Web端Google Maps API密钥，且已将自有网站域名添加到密钥的允许列表中；检查密钥是否启用了Maps JavaScript API
• 模态框样式检查：在调试工具中查看模态框元素的CSS，确认：
  • display属性已切换为block（而非none）
  • 宽高设置合理（不是0或极小值）
  • z-index层级足够，没有被其他元素遮挡
• 地图初始化时机：确保地图是在模态框完全显示后才初始化，若提前初始化，需在模态框弹出后调用google.maps.event.trigger(mapInstance, 'resize')触发地图重绘
• 资源加载检查：在调试工具的Network面板中查看Google Maps相关资源（JS脚本、瓦片图等）的加载状态：
  • 若出现403错误：大概率是API密钥权限问题
  • 若出现404错误：检查地图初始化代码中的资源路径是否正确
• 权限配置：
  • Android：在AndroidManifest.xml中添加ACCESS_FINE_LOCATION/ACCESS_COARSE_LOCATION权限（若地图需要定位）
  • iOS：在Info.plist中配置NSLocationWhenInUseUsageDescription字段（若地图需要定位）

第三步：跨端通用验证 #

• 在普通桌面浏览器（Chrome/Safari）中打开自有网站，测试按钮弹出地图功能是否正常：
  • 若浏览器中正常：聚焦排查WebView的特殊配置限制
  • 若浏览器中也异常：先修复网站端的地图代码问题

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