1

私は ng-map ディレクティブを使用しており、angularjs アプリケーションにオートコンプリート API を配置しています。正常に動作しています。しかし、問題は、ブートストラップモーダルで両方が必要であり、ブートストラップモーダルで同じコードを使用している場合、ng-map も場所のオートコンプリートも何も機能していません。何か不足している場合は提案してください。angularの ng-map ディレクティブを使用した場合にのみ問題が発生します。javascript を使用すると、すべて正常に動作しますが、大量のコードを記述したくありません。ng-map のみを使用したい。ここに私のマークアップがあります

<ng-map zoom="8">
<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>
<marker visible="true" centered="true" position="{{vm.place.formatted_address}}" title="You are looking for this" draggable="true"></marker>
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.showCity(event, c)"></marker>
 <directions
        draggable="false"
        travel-mode="DRIVING"
        panel="p3"
        origin="jaipur"
        destination="Delhi">
      </directions>
  </ng-map>

私の plunkrを参照してください

コード全体

4

2 に答える 2

2

マップはブートストラップ モーダルで表示されるため、以下に示すようにモーダル ダイアログが開いたら、マップを明示的に初期化する必要があります。

 $('#myModal').on('show.bs.modal', function(e) {
        $timeout(function() {
            google.maps.event.trigger(vm.dialogMap, 'resize');
            vm.dialogMap.setCenter(vm.mapSettings.center);
            vm.dialogMap.setZoom(vm.mapSettings.zoom);
        });
 });

'show.bs.modal'モーダルが開かれると、イベントがトリガーされます。

別の手から、残念ながら現時点で angularjs-google-mapsには、複数のマップインスタンスがページに追加された場合にルートが印刷されないようにするバグが含まれています (あなたの例では2つのマップインスタンスがあります)
以下の例では回避策が提供されています.

実施例

次のフォークされたプランカーは、次の方法を示しています。

  • モーダル ダイアログにマップを適切に表示する
  • 複数のマップ インスタンスでルートを印刷する
于 2016-04-09T14:17:04.673 に答える