1

angular JSでクリックするとGoogleマップを表示しようとしています。しかし、私の関数は、関数呼び出しに基づいて可視性を切り替えているようです (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 に答える