1

我正在尝试使用 Angular JS 在点击时显示谷歌地图。但我的函数似乎是基于函数调用（通过 ng-show）切换可见性。这意味着我的“调整大小”事件的触发器在地图 div 实际可见之前执行，因此它无法正常工作。

$scope.mapVisible = false;
$scope.toggleMap = function() {
    $scope.myMap.panTo($scope.myMarkers[0].getPosition());
    $scope.mapVisible = !$scope.mapVisible;
    // this executes too soon. How to block until the div is really visible?
    google.maps.event.trigger($scope.myMap, 'resize');
}

<div ng-show="mapVisible">
   <!-- map here -->
</div>

那么如何阻止在我的地图上触发“调整大小”事件，直到 div 真正可见？

4

2 回答 2

1 
$scope.$watch("mapVisible", function (val) {
  if (val) {
    google.maps.event.trigger($scope.myMap, "resize");
  }
});

这将确保在触发事件之前地图是可见的。
Angularjs 通过做脏检查来处理双向绑定。这基本上意味着正在观察的值与上一个周期中的值进行比较。$digest当发生可能改变范围内任何值的事情时，每个循环 ( ) 开始运行。如果值发生变化，将在循环完成后反映出来。

回到您的问题，当您切换mapVisible属性时，视图不会立即更新。它在重绘视图之前等待循环结束。但是你resize这么早触发事件，当地图仍然不可见时，因此渲染无效。

$watch确实会监视属性，并且更改将反映在更改的next周期中，这意味着视图将由调用观察器函数的时间进行更新。因此，将功能放在resize这里可以解决您的问题。

于 2013-03-08T20:19:27.680 回答
0

我认为最简单的情况是使用该$timeout服务：

scope.$on "map:ui:shown", (event, args)->
    $timeout ->
      #use a delay because most of the time, the resizing should occur immediately after an angular cycle
      #like when an ng-show has been set to the True condition
      googleMaps.event.trigger(map, 'resize')
      map.fitBounds scope.bounds if scope.bounds
于 2013-11-02T21:52:39.750 回答