谷歌地图在模态没有显示后两次开放-离子

Google Maps in modal not showed after two times open - Ionic

本文关键字：两次 离子 模态 显示 谷歌地图      更新时间：2023-09-26

我在模态视图中创建了一个谷歌地图，打开该模态后，地图就会显示出来。然后，我点击导航按钮返回主页。之后，我试图打开模态再次查看地图，但地图没有显示。

此处演示：http://codepen.io/aishahismail/pen/vLZprV

HTML:

   <script id="modal.html" type="text/ng-template">
      <div class="modal">
        <header class="bar bar-header bar-positive">
          <h1 class="title">I'm A Modal</h1>
          <div class="button button-clear" ng-click="modal.hide()"><span class="icon ion-close"></span></div>
        </header>
        <content has-header="true" padding="true">
          <p>This is a map</p>
          <div id="map" data-tap-disabled="true"></div>
        </content>
      </div>
    </script>

Javascript：控制器

.controller('HomeTabCtrl', function($scope, $ionicModal, $ionicLoading, $compile) {
  console.log('HomeTabCtrl');
    $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
        $scope.modal = $ionicModal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    });  
  $scope.showMap = function (){
        var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);
        var infowindow = new google.maps.InfoWindow({
          content: compiled[0]
        });
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        $scope.map = map;
  }
  $scope.openModal = function(){
    $scope.modal.show();
    $scope.showMap();
  }
});

我在模式中的堆栈溢出谷歌地图中发现了同样的问题，只显示第一个地图，但仍然没有得到答案。我已经看了一天了，但我仍然无法解决这个问题。我希望有人能帮我。

将代码移动到mainCtrl而不是HomeTabCtrl可以解决问题：

检查此CodePen

HTML:

<body ng-controller="mainCtrl">
...

JS:

.controller('mainCtrl', function($scope, $ionicModal, $compile) {
// the code previously in HomeTabCtrl
}

我注意到您使用的是旧版本的Ionic和旧式指令。以下是使用Angular谷歌地图更新的Ionic应用程序版本：

http://plnkr.co/edit/n4Qr3OMcGIb5uU28xISU?p=preview

坐了将近一周试图找到解决方案，终于找到了答案。

所有的代码在问题中都是一样的，但我只是在我的控制器中添加这些代码。看看

//Remove modal
$scope.$on('$destroy', function () {
    $scope.modal.remove();
});
//Set $scope.map to null
$scope.$on('modal.hidden', function () {
    $scope.$on('$destroy', function () {
        $scope.map = null;
    });
});

我还更改了地图模块的代码，我用的是$cordovaGeolocation。以下是homeTabCtrl 的完整代码

Javascript:homeTabCtrl

 .controller('HomeTabCtrl', function($scope, $ionicModal, $cordovaGeolocation) {
    $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
        $scope.modal = $ionicModal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    });  
     $scope.showMap = function (){
        var options = {
           timeout: 10000,
           enableHighAccuracy: true
        };
        $cordovaGeolocation.getCurrentPosition(options).then(function (position) {
          var latLng = new google.maps.LatLng(lat, lng);
          var mapOptions = {
             center: latLng,
             zoom: 15,
             mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
          google.maps.event.addListenerOnce($scope.map, 'idle', function () {
            var marker = new google.maps.Marker({
                map: $scope.map,
                animation: google.maps.Animation.DROP,
                position: latLng
            });
        });
        }, function (error) {
           alert("Could not get location");
        });
    };
    $scope.openModal = function(){
      $scope.modal.show();
      $scope.showMap();
    };
    //Remove modal
    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });
    //Set $scope.map to null
    $scope.$on('modal.hidden', function () {
        $scope.$on('$destroy', function () {
            $scope.map = null;
        });
    });
});
相关文章：