两次打开后未显示模态的谷歌地图 - Ionic答案

【问题标题】：Google Maps in modal not showed after two times open - Ionic两次打开后未显示模态的谷歌地图 - Ionic
【发布时间】：2016-04-16 13:37:06
【问题描述】：

我在模态视图中创建了一个谷歌地图，一旦我打开该模态，地图就会显示出来。然后，我单击 nav-back-button 转到主页。之后我尝试打开模式再次查看地图，但地图没有显示。

在这里演示：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 天内一直在寻找它，但我仍然无法解决这个问题。我希望有人可以帮助我。

【问题讨论】：

你试过阅读这张 Stack Overflow 票吗？ stackoverflow.com/questions/32037272/…
另外，试试这个：stackoverflow.com/questions/16532411/…

标签： javascript google-maps ionic

【解决方案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 应用程序版本：

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

【讨论】：

感谢您的回答。但是，我能知道是否有任何其他解决方案，因为如果我将其应用于其他项目，该项目具有所需值的控制器：.controller('mainCtrl', function($scope, $ionicModal, $compile) { if($rootScope.gender == 'Male'){ //Do something }; .................. } 基于上述情况，它当然会返回错误，因为 $scope.gender未定义。我在这个plnkr.co/edit/e5dUjauCZNdxA1psQ4Ej?p=preview 中编辑它
抱歉，我在您上述问题中发布的代码的任何部分都找不到“性别”...
抱歉，这个plnkr.co/edit/e5dUjauCZNdxA1psQ4Ej?p=preview是新的。
请您更准确地解释一下问题是什么？特别是在 Plunker 中我没有看到任何奇怪的东西......
对不起，我现在真的很困惑，从 2 天前开始尝试解决这个问题。好的，我会解释清楚的。我想要做的是我想在“modal.html”中显示“$scope.test”，但它没有显示。 plnkr.co/edit/e5dUjauCZNdxA1psQ4Ej?p=preview 您可以在“modal.html”的标题中看到像这样显示的“输出：”。它应该是“输出：测试”，就像在“map.html”中一样。

【解决方案2】：

经过近 1 周的尝试寻找解决方案，我终于找到了答案。

问题中的所有代码都相同，但我只是将其添加到我的控制器中。看看吧

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

【讨论】：