Angular+Capacitor移动端@googlemaps/js-api-loader加载Places库无响应求助

问题场景 #

开发 Angular + Capacitor 应用，集成 Google Places/Geocoding API，使用 @googlemaps/js-api-loader 实现API加载。Web端运行正常，但在Android/iOS移动端调用 loader.importLibrary("places") 时无响应，无法获取 AutocompleteService。已尝试旧版 load() 方法、async/await/Promise/回调等异步写法、检查网络权限，均未解决；当前使用Angular原生HTTP而非Capacitor HTTP客户端。

调试步骤 #

1. 抓取Web端与移动端的差异日志 #

• Android：通过Android Studio的Logcat过滤chromium或WebView关键词，查看是否有Google API加载失败的报错（如CORS限制、API密钥验证失败、脚本加载超时）。
• iOS：在Xcode控制台查看WebView的JS日志，检查是否存在未捕获的Promise拒绝或资源加载错误。

2. 验证API密钥的移动端有效性 #

• 即使云控制台配置了无限制密钥，移动端WebView的请求来源可能被Google判定为未知。尝试给API密钥添加应用限制：
  • Android：绑定应用包名和签名证书指纹
  • iOS：绑定Bundle ID
• 在移动端WebView中直接访问测试接口：https://maps.googleapis.com/maps/api/place/autocomplete/json?input=test&key=你的密钥，确认是否能正常返回结果，排除密钥或网络层面的问题。

3. 检查内容安全策略（CSP）配置 #

• 查看Angular index.html中的CSP meta标签，确认是否允许加载https://maps.googleapis.com的脚本和关联资源。如果CSP规则过严，会阻止Google API脚本注入。
• 临时放宽CSP测试：

  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; img-src 'self' data: https://maps.gstatic.com;">
  

4. 绕过loader直接加载API脚本 #

• 跳过@googlemaps/js-api-loader，直接在index.html中引入Google Maps脚本：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的密钥&libraries=places&v=quarterly" async defer></script>
  

• 在Angular代码中直接访问全局变量：window.google.maps.places.AutocompleteService，确认是否能正常获取，排除loader包的兼容性问题。

5. 检查Capacitor WebView核心配置 #

• Android：确认AndroidManifest.xml中WebView启用了JavaScript，且允许第三方Cookie（Google API依赖Cookie完成验证）。
• iOS：在Info.plist中检查WKWebViewConfiguration相关配置，确保开启JavaScript和跨域请求支持。

6. 调整API加载时机 #

• 确保在Angular组件的ngAfterViewInit钩子中执行API加载逻辑，而非ngOnInit，避免WebView环境未完全初始化导致的加载失败。
• 尝试延迟加载：用setTimeout延迟1秒后调用loader.importLibrary("places")，验证是否为时机问题。

可能的解决方案 #

1. 捕获加载错误信息 #

在importLibrary调用中添加错误捕获，直接定位问题根源：

try {
  const { AutocompleteService } = await loader.importLibrary("places");
  console.log(AutocompleteService);
} catch (err) {
  console.error('Places库加载失败:', err);
}

2. 调整loader配置参数 #

移除version: "quarterly"或指定具体版本，同时添加语言/区域参数：

const loader = await new Loader({
  apiKey: environment.googlePlacesApiKeyWeb,
  language: 'zh-CN',
  region: 'CN'
});

3. 切换到Capacitor专用插件 #

考虑使用官方@capacitor/google-maps插件，该插件为Capacitor应用优化，避免WebView加载JS API的兼容性问题，同时支持Places和Geocoding功能。

4. 尝试替换HTTP客户端 #

虽然当前使用Angular原生HTTP，但Google API的加载脚本可能依赖浏览器原生的fetch/XHR。尝试切换为Capacitor HTTP客户端，或确保Angular HTTP配置允许跨域请求。

内容的提问来源于stack exchange，提问作者RattleStork.org