升级WKWebView后Ionic1应用模态框中Angular Google Maps无法加载

我之前帮不少开发者处理过类似插件升级后地图渲染异常的情况，结合你的描述——升级cordova-plugin-ionic-keyboard和依赖的cordova-plugin-ionic-webview后，普通视图地图正常、模态框里地图加载不出来且无控制台报错，大概率是webview带来的DOM渲染时机、视图层级或容器尺寸问题，给你几个针对性的解决方案：

• 确保地图在模态框完全显示后初始化
  Ionic 1的模态框有自己的生命周期事件，旧插件环境下你在控制器初始化时加载地图可能还能正常工作，但新webview可能延迟了模态框DOM的渲染。建议把地图初始化逻辑移到afterShow事件里：

  $ionicModal.fromTemplateUrl('your-modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
    $scope.modal.afterShow(function() {
      // 在这里初始化你的angular-google-maps
      $scope.map = {
        center: { latitude: 40.1451, longitude: -99.6680 },
        zoom: 8
      };
    });
  });
  

• 触发地图重新渲染
  有时候地图已经完成初始化，但因为容器尺寸变化或视图层级问题没显示出来，你可以在模态框显示后手动触发谷歌地图的resize事件：

  $scope.modal.afterShow(function() {
    // 假设你的地图实例是$scope.mapObject
    google.maps.event.trigger($scope.mapObject, 'resize');
    // 如果需要，重新设置地图中心确保显示正常
    $scope.mapObject.setCenter(new google.maps.LatLng(40.1451, -99.6680));
  });
  

• 确认模态框内地图容器的尺寸
  检查模态框里的地图容器是否有明确的宽高样式，新webview对动态尺寸容器的处理逻辑可能和旧环境不同。给容器添加固定或百分比的宽高，同时确保层级正确：

  .modal-map-container {
    width: 100%;
    height: 300px;
    position: relative;
    z-index: 10; /* 确保容器在模态框上层 */
  }
  

• 调整webview插件版本
  最新版的cordova-plugin-ionic-webview可能对Ionic 1的兼容性不够友好，你可以尝试降级到更稳定的2.x系列版本：

  # 先卸载当前版本
  cordova plugin remove cordova-plugin-ionic-webview
  # 安装兼容性较好的2.5.3版本
  cordova plugin add cordova-plugin-ionic-webview@2.5.3
  

• 检查webview的CSP设置
  新webview可能有更严格的内容安全策略，确保你的index.html里的CSP允许加载谷歌地图的资源：

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

你可以先从第一个方案开始尝试，初始化时机问题是这类场景最常见的诱因，大部分情况都能解决。

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