gMaps Marker und InfoWindow mit AngularJS

Question

Ich verwende ng-map, um die Karte auf meiner Angular-Seite und folgende this example zu implementieren (durch die README-Datei auf ng-map GitHub rep verbunden).

Mein Ziel ist es, mehrere Marker (mit ng-Repeat) und ein InfoWindow, um einige releated Informationen zu veröffentlichen. Für die Einfachheit verwende ich einen Anwalt. Die Marker repräsentieren also die Positionen des Anwalts und das infoWindow wird seine Informationen veröffentlichen.

Mit dem im Verstand, das ist der Code meiner Vorlage (vereinfacht):

<div> 
    <ng-map default-style="true"> 

    <marker ng-repeat="lawyer in vm.data.lawyers track by $index" id="marker-{{$index}}" position="{{lawyer.address}}" on-click="vm.map.showInfoWindow('foo', 'marker-'+$index);"></marker> 

    <info-window id="foo" on-mouseover=vm.mouseover()> 
     <div class="customWindow" ng-non-bindable=""> 
     My name is {{lawyer.firstname}}, etc... 
     </div> 
    </info-window> 

    </ng-map> 
</div> 

My (vereinfacht) Regler istead ist:

myCtrl(NgMap, authentication){ 
    var vm = this; 

    //Getting the map instance 
    NgMap 
    .getMap() 
    .then(function(map) { 
     vm.map = map; 
    }); 

    //Getting Data (lawyer and cabinet) 
     authentication.lawyersAll() 
      .success(function(data){ 
       vm.data = { lawyers: data }      
      }) 
      .error(function(err){ 
       console.log(err); 
      }); 

} 

Wie ich die Marker binden kann und das Infofenster?

Answer 1

Ich finde es heraus.

Ist ein benutzerdefiniertes Verhalten beim Klicken auf den Marker möglich: Speichern Sie das Modell nach dem Klicken auf dem Controller und laden Sie die Modelldaten aus dem InfoWindow. Ziemlich einfach.

Beispiel hier: https://ngmap.github.io/#/!infowindow_ng_click.html mit Pluncker im Zusammenhang damit.