模态中的谷歌地图仅显示第一张地图答案

【问题标题】：Google maps in modal only displays first map模态中的谷歌地图仅显示第一张地图
【发布时间】：2016-04-11 21:39:02
【问题描述】：

我正在尝试使用 google maps api 来显示我从一组 json 数据中传入的地址的地图，但是当我运行代码时，它只显示传入其中的第一个地址。打开模式时，它会显示地图，但一旦关闭并打开另一个模式，它根本不会显示地图，只是一个空白区域。

模态控制器

.controller('ModalCtrl', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function(b,c) {
    $scope.modal.show();
    var myLatlng = new google.maps.LatLng(b,c);
  var mapProp = {
    center: myLatlng,
    zoom:15,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map"),mapProp);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    $scope.map = map;

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

})

模态

<ion-modal-view>
    <ion-header-bar id="modalheader">
        <h1 class="title"></h1>
<!-- button to close the modal -->
        <button class="button icon ion-android-close" ng-click="closeModal();"></button>
    </ion-header-bar>
<ion-content class="item-icon-right item-text-wrap" id="modal">
<ion-list id="modalitem">
<ion-item>
<!-- displays the larger view of the office address -->
    <h1>{{office.LocationName}}</h1>
        <p id="mdets">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
        <i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}"  ng-click="togglefav(office.id); $event.stopPropagation();"></i>
    </ion-item>
</ion-list>
<!-- creates the map view from the json data -->
<div data-tap-disable="true" draggable="false">
    <div id="map" style="width:100%; height:380px;"></div>
</div>

</ion-content>
</ion-modal-view>

可以打开模式的页面。

<ion-view view-title="Favourites">
<!-- template for the favourites page -->
    <ion-content>
        <ion-list>
        <!-- displays the items that the user has favourited through the filter function -->
        <ion-item id="fav" class="item-icon-right item-text-wrap" collection-repeat="office in offices|filter:ifinfav1" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long); lastview(office.id);">
            <h3>{{office.LocationName}}</h3>
            <p id="details">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
            <i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
        </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

【问题讨论】：

标签： javascript jquery google-maps ionic

【解决方案1】：

这是一个在模态中使用Angular-google-maps 的 Ionic 应用示例：

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

在模态模板中有地图指令（ui-gmap-google-map、ui-gmap-marker、ui-gmap-marker）：

    <div id="map_canvas">
      <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
        <ui-gmap-marker idKey='1' coords='map.center'>
          <ui-gmap-window isIconVisibleOnClick="true">
                <div><a ng-click='clickTest()'>Click me!</a></div>
            </ui-gmap-window>
        </ui-gmap-marker>
      </ui-gmap-google-map>
    </div>

【讨论】：