Javascript 角度模式下谷歌地图的设置中心

我正在使用指令创建迷你地图，给定属性

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

不起作用（请参阅）

---

是否有任何方法可以在打开模式后强制指令触发，或者有另一种方法可以解决在DOM中可见地图之前将地图居中的问题？

为了确保地图正确定位，请替换指令中的线条：

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

与

假设您的地图是通过以下示例显示的，则演示如何在模式对话框中显示Google地图

---

您是否也尝试更新调整大小事件？然后，您只需找出在何处触发调整大小事件并获得一个干净的解决方案。这将不起作用，因为映射在可见之前将处于空闲状态，因此您也有同样的问题。但是，贴图分幅在可见之前不会加载，因此您可以使用

分幅加载

事件。更新您的答案，我会将其标记为已接受。

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