如何在呈现angular.js ui-map指令后触发map resize事件？

Question

ui-map示例在简单的angular.js页面上使用时效果很好。 现在我正在使用ui-router并尝试在视图中显示地图。 会发生的是地图图块仅显示在地图的一半上。 如果我调整窗口大小，则会正确显示地图。

我认为我必须在呈现视图后触发Google地图调整大小事件，但是如何？

google.maps.event.trigger(<myMapObject>, 'resize'); 

Answer 1

在调用触发器之前等待一段时间，我遇到了同样的问题并在此处找到了解决方法：

AngularJS: map via Google Maps API v3 in a tab

window.setTimeout(function(){
    google.maps.event.trigger(map, 'resize');
},100);

Answer 2

使用角度1.3.15

$timeout(function(){
         angular.forEach($scope.maps, function(index) {
            google.maps.event.trigger(index, 'resize');
          });
      }, 100);
    }
    $scope.maps = [];
    $scope.$on('mapInitialized', function(evt, evtMap) {
          $scope.maps.push(evtMap);
    });

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

其他解决方案

不添加$ timeout你也可以使用$ scope。$ applyAsync（）在相同的摘要周期内运行代码