模式中的Google地图仅显示第一张地图

我正在尝试使用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 }); }) 

语气

   
        
{{office.LocationName}}
 
{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}
     
 
 
   

可以打开模态的页面。

       
{{office.LocationName}}
 
{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}
      

Answer 1

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

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

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

  
    
Click me!