Google Maps不在模态离子中显示

Question

我一直按照https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/将Google地图集成到我的离子应用程序中本教程。我已经将地图集成到一个没有问题的视图中，并且它正在检测位置。但是，当我尝试将地图添加到模态中时，却得到了一个没有模型的空白模态。

我已经检查过Google Maps not showing in Ionic Modal，并且在加载HTML模板后加载地图时，我认为这不会有所帮助。

这是我的模态代码，其中包括地图。

<script id="location.html" type="text/ng-template">
      <ion-modal-view>
        <ion-content>
          <div>
            <div id="map" data-tap-disabled="true"></div>
          </div>       
          <button class="button button-block button-dark " ng-click="closeModal()"> Close</button>
        </ion-content>

      </ion-modal-view>
    </script> 

这是我用来打开模式的控制器代码。

$ionicModal.fromTemplateUrl('location.html', {
    scope: $scope,
    animation: 'slide-in-up'
 }).then(function(modal) {
    $scope.modal = modal;
 });

  $scope.detectLocation = function() {
    $scope.modal.show();
    $scope.loadgooglemap();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  // Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });

  $scope.loadgooglemap = function(){
    var options = {timeout: 10000, enableHighAccuracy: true};

    $cordovaGeolocation.getCurrentPosition(options).then(function(position){

    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

    //Wait until the map is loaded
    google.maps.event.addListenerOnce($scope.map, 'idle', function(){

      var marker = new google.maps.Marker({
          map: $scope.map,
          animation: google.maps.Animation.DROP,
          position: latLng
      });      

      var infoWindow = new google.maps.InfoWindow({
          content: "Here I am!"
      });

      google.maps.event.addListener(marker, 'click', function () {
          infoWindow.open($scope.map, marker);
      });

    });
    }, function(error){
      console.log("Could not get location");
    });

  }

打开模态时没有任何错误。只需使用“关闭”按钮获取模态（我已将其包含在模态中）。

可能未在模式中加载地图的原因是什么？我做错了什么？有人可以帮我吗？

Answer 1

添加以下CSS规则：

ion-app._gmaps_cdv_ .ion-page:not(._gmaps_cdv_),
ion-app._gmaps_cdv_ ion-modal:not(._gmaps_cdv_) {
    display: none;
}

在模态组件中：

ionViewWillLeave() {

    const nodeList = document.querySelectorAll('._gmaps_cdv_');

    for (let k = 0; k < nodeList.length; ++k) {
        nodeList.item(k).classList.remove('_gmaps_cdv_');
    }
}