Ionic2中Google Map街景图在iPhone设备无法加载的问题

你遇到的这个iOS上加载街景图失败的问题，我之前帮不少开发者处理过，主要是iOS的安全限制和谷歌API密钥配置这两个方向的问题，咱们一步步来排查解决：

1. 优先切换到HTTPS协议 #

你当前的代码用的是http://开头的URL，而iOS的App Transport Security (ATS) 会默认阻止非HTTPS的请求，这是最常见的触发403的原因。直接把URL改成HTTPS试试：

<img src="https://maps.googleapis.com/maps/api/streetview?size=400x200&location=28.68627380000001,77.22178310000004&key=YOUR_ACTUAL_API_KEY"/>

2. 检查谷歌API密钥的配置 #

• 确认Street View Static API已启用：登录谷歌云控制台，找到你的API密钥对应的项目，在API库中搜索「Street View Static API」，确保它处于启用状态。
• 检查API密钥的平台限制：
  • 如果你的密钥设置了HTTP referrers限制，要把Ionic iOS WebView的域名加进去，比如ionic://localhost、capacitor://localhost（根据你用的是Cordova还是Capacitor），以及你打包后的自定义域名。
  • 如果你是原生打包的iOS应用，建议把应用的Bundle ID添加到密钥的iOS应用限制列表里，这样更安全也更适配iOS的请求方式。

3. 配置Ionic WebView的导航权限 #

• 如果你用的是Cordova，在config.xml中添加允许谷歌地图域名的导航规则：

<allow-navigation href="https://maps.googleapis.com/*" />
<allow-intent href="https://maps.googleapis.com/*" />

• 如果你用的是Capacitor，在capacitor.config.ts中配置：

export default {
  appId: 'com.your.app.id',
  appName: 'YourAppName',
  webDir: 'www',
  server: {
    allowNavigation: ['maps.googleapis.com']
  }
};

4. 临时排查ATS限制（仅用于测试） #

如果上面的步骤都没解决，可以临时在iOS的Info.plist中添加ATS例外（不建议长期使用，优先用HTTPS）：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>maps.googleapis.com</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

快速排查小技巧 #

把你生成的完整HTTPS URL复制到iPhone的Safari浏览器中打开：

• 如果Safari也显示403，那问题肯定出在谷歌API密钥的配置或服务启用上；
• 如果Safari能正常加载，那就是Ionic WebView的配置问题，回到步骤3调整即可。

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