javascript - Google map 未显示在 Modal Ionic 中

Question

我一直按照 https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/ 将 Google map 集成到我的 ionic 应用程序中 本教程。我已将 map 集成到 View 中，没有出现任何问题，并且它正在检测位置。但是，当我尝试将 map 添加到模态中时，我得到的是空白模态，其中没有 map 。

我检查过Google Maps not showing in Ionic Modal ，并且由于我在加载 HTML 模板后加载 map ，所以我认为这不会有帮助。

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

<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> 

这是我用来打开模式的 Controller 代码。

$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");
    });

  }

打开模式时没有收到任何错误。只需使用“关闭”按钮获取模式(我已将其包含在模式中)。

map 未在模式中加载的可能原因是什么。我做错了什么？谁能帮我解决这个问题吗？

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_');
    }
}