javascript - angular.js ui-map 指令渲染后如何触发地图调整大小事件？

Question

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

我想我必须在视图渲染后触发 Google Maps resize 事件，但是如何？

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

Answer 1

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

AngularJS：在选项卡中通过 Google Maps API v3 进行地图

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()