angularjs - Google マップが 2 回目に読み込まれない - AngularJS

Question

私は GoogleMap API ('angular-google-maps' js パッケージ) を使用していますが、非常に奇妙な動作をしています。

初めてロードすると、次のように完全なマップがロードされます。

次に、ダイアログを閉じて再度開くと、次のように表示されます。

マップは別のダイアログの上にあるダイアログとして表示されることに注意してください。

何か案は？

Answer 1

Angular Google Map モジュールを使用している場合は、refresh 属性を googlemap 要素に追加する必要があります。

モジュールのドキュメントに書かれているように：

refresh = "expression" - true と評価された場合にマップの更新をトリガーする式。マップが最初に非表示になっている場合に便利です。

Answer 2

マップを再描画する必要があります。次のコードを使用してこれを行うことができます。

google.maps.event.trigger(map, 'resize');

これにより、マップが更新され、問題が修正されます。

Answer 3

追加するだけです：

$scope.render = true;

次のように、マップ コントロールに ng-if="render" を追加します。

<ui-gmap-google-map ng-if="$parent.render" center="map.center" zoom="map.zoom">
        <marker coords="map.center"></marker>
    </ui-gmap-google-map>

Answer 4

問題はここで回答されています https://github.com/allenhwkim/angularjs-google-maps/issues/88

この問題を回避するには、次のように手動で中央に配置する必要があります。

あなたのjsコントローラーで

$scope.$on('mapInitialized', function (event, map)
{
    window.setTimeout(function() {
      window.google.maps.event.trigger(map, 'resize');
      map.setCenter(new google.maps.LatLng(38,-98));
    }, 100)
});

そしてあなたのHTMLで

<ng-map ng-if="subView=='map'" center="38,-98" zoom="5"></ng-map>