Cordova应用集成Google Maps Directions JS API移动端报错求助

我之前在做Cordova项目时也踩过类似的Google Maps JS API坑，结合你的情况，给你几个针对性的排查和修复方案：

1. 绑定正确的Cordova初始化事件 #

Cordova的WebView加载时机和普通浏览器差异很大，大概率是你在DOM还没完全就绪时就调用了地图API，导致找不到对应DOM元素触发报错。

一定要把地图初始化代码放在deviceready事件回调里，而不是普通的DOMContentLoaded或window.onload：

document.addEventListener("deviceready", function() {
  // 在这里启动地图初始化逻辑
  initDirectionsMap();
}, false);

function initDirectionsMap() {
  // 你的路线规划核心代码
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map-container"), {
    zoom: 10,
    center: {lat: 39.9042, lng: 116.4074},
  });
  directionsRenderer.setMap(map);
  // 后续的路线请求、渲染逻辑...
}

2. 调整Content Security Policy（CSP）设置 #

Cordova默认的安全策略可能会阻止Google Maps的资源加载，导致API初始化失败。你需要在index.html的<meta>标签里更新CSP规则：

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

重点要把https://maps.googleapis.com和https://maps.gstatic.com加入允许列表，同时确保script-src包含这些域名，并且开启unsafe-inline和unsafe-eval（Maps API依赖这两个权限）。

3. 确保API脚本加载正确 #

虽然你试过不同版本，但建议明确指定稳定的最新版本，同时必须加上libraries=directions参数（Directions属于附加库，默认不加载）：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&v=3.54&libraries=directions"></script>

可以去Google Maps开发者文档确认当前的稳定版本号，避免用v=3.exp这种测试版。

4. 核查API密钥的权限与限制 #

哪怕换了密钥，也要确认：

• 你的Google Cloud账户已经启用了Google Maps JavaScript API和Google Maps Directions API
• 密钥的限制设置里，允许你的Cordova应用的Android包名/iOS Bundle ID访问（测试阶段可以暂时设为无限制，上线后再收紧）
• 账户有足够的API配额，没有触发使用限制

5. 用WebView调试工具看详细日志 #

Cordova的WebView可以通过Chrome DevTools（Android）或Safari开发者工具（iOS）调试：

• Android设备连接电脑后，打开chrome://inspect就能查看WebView的控制台日志
• iOS设备可以通过Safari的「开发」菜单连接查看

控制台里通常会有更具体的错误信息，比如资源加载失败、权限拒绝等，能帮你快速定位问题。

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