Question

我在模态视图中创建了Google地图，一旦我打开该模态，就会显示地图。然后，我点击导航后退按钮转到主页面。之后我尝试打开模态再次查看地图，但地图没有显示。

在这里演示：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();
  }
});

我在堆栈溢出Google maps in modal only displays first map中发现了同样的问题，但仍然没有得到答案。我在1天内一直在寻找它，但我仍然无法解决这个问题。我希望有人可以帮助我。

Answer 1

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

检查此CodePen

<强> HTML：

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

<强> JS：

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

我注意到你使用的是旧版本的Ionic和旧式指令。以下是使用Angular-google-maps更新了Ionic app的版本：

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

Answer 2

坐了将近一周后，试着找到解决方案，最后我得到了答案。

问题中的所有代码都相同，但我只在我的控制器中添加此代码。看看

//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;
        });
    });
});

模式中的谷歌地图在两次打开后未显示 - 离子

2 个答案: