1

Ich benutze ng-map-Direktive und Place Autocomplete-API in meiner angularjs-Anwendung. die gut funktionieren. aber das Problem ist, ich brauche beide in einem Bootstrap-modal und wenn ich den gleichen Code in einem Bootstrap-modal verwenden, funktioniert Nothing weder ng-map noch Ort automatische Vervollständigung. Schlage mich vor, wenn mir etwas fehlt. Problem tritt nur auf, wenn ich Angulars ng-map-Direktive verwende. Mit Javascript funktioniert alles gut, aber ich möchte keine Menge Code schreiben. Ich möchte nur ng-map verwenden. Hier ist mein Markupng-map und Place Autocomplete funktioniert nicht in modal

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

meine plunkr

für ganzen Code sehen

Antwort

2

Da die Karte in Bootstrap-modal angezeigt wird, muss die Karte explizit initialisiert werden, sobald der modale Dialog als geöffnet unten gezeigt:

$('#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' Ereignis wird ausgelöst, sobald das Modal geöffnet wird.

Aus einer anderen Hand, leider angularjs-google-maps zur Zeit enthält ein bug, die die Route, wenn in einer Seite
In der (in Ihrem Beispiel dort zwei Karte Instanzen) hinzugefügt mehrere Karten Instanzen gedruckt werden verhindert Im folgenden Beispiel wird eine Problemumgehung bereitgestellt.

Arbeitsbeispiel

Die folgende forked plunker, wie Sie:

  • richtig Karte anzeigen in modalen Dialog
  • Druck Routen in mehreren Karten Instanzen
+0

Sie lösen die Hälfte meiner Problem. search-auto-completion funktioniert immer noch nicht in modal. –

Verwandte Themen