setCenter模態

Question

谷歌地圖在角我用一個指令創建迷你地圖，給出的屬性lat和lng，自動重新定位地圖，如果這些值的變化：

.directive('map', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     lat: '@', 
     lng: '@' 
    }, 
    link: function(scope, element, attrs){ 
     var lat = scope.$eval(attrs.lat); 
     var lng = scope.$eval(attrs.lng); 

     var center = new google.maps.LatLng(lat,lng), 

     mapOptions = { 
     zoom: 16, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     draggable: true, 
     zoomControl: true, 
     scrollwheel: false, 
     disableDoubleClickZoom: true, 
     styles: [...], 
     disableDefaultUI: true 
     }, 
     map = new google.maps.Map(element[0], mapOptions), 
     marker = new google.maps.Marker({ 
     position: center, 
     map: map, 
     icon: { 
      url: 'img/marker.png', 
      scaledSize: new google.maps.Size(24, 32) 
     } 
     }); 

     function update() { 
     lat = scope.$eval(attrs.lat); 
     lng = scope.$eval(attrs.lng); 
     center = new google.maps.LatLng(lat,lng); 

     map.setCenter(center); 
     marker.setPosition(center); 

     console.log('updated'); 
     } 

     attrs.$observe('lat', update); 
     attrs.$observe('lng', update); 
    } 
    }; 
}) 

在使用中這樣的例子是：

<div class="smallMap" lat="49" lng="-1" map></div> 

這通常很好，但在模態中使用它時會出現問題。由於指令在模式打開之前觸發，因此在DOM中不可見。因此，setCenter不起作用（請參閱http://www.blogbyben.com/2011/12/gotcha-of-day-google-maps-setcenter.html）。

有沒有什麼辦法可以強制指令在模態打開後觸發，或者有另一種方法解決地圖在DOM中可見之前居中的問題？

Answer 1

爲了確保地圖正確定位更換線指令：

map.setCenter(center); 
marker.setPosition(center); 

與

google.maps.event.addListenerOnce(map, 'idle', function() { 
    map.setCenter(center); 
    //marker.setPosition(center); 
    google.maps.event.trigger(map, 'resize'); 
}); 

假設您的地圖通過AngularJS Modal directive顯示下面的例子演示瞭如何顯示谷歌模態對話框中的地圖

Codepen