2016-05-16 6 views
0

Ich habe ein Problem mit NgMap. Ich möchte zwei Markierungen erstellen, sobald der Benutzer die Eingabe des Ortsnamens beendet hat. Es gibt zwei Eingänge für zwei Lokalisierungen - ich verwende Google Autocomplete. Nach dem Tippen bekomme ich eine Antwort mit langer und lat. Lokalisierung. I gesetzt Uhren auf Eingaben, wie unten:AngularJS NgMap

$scope.$watch(function ($scope) { return $scope.locationFrom }, function() { 
     if (angular.isDefined($scope.locationFrom)) { 
      vm.geopositionFrom = $scope.locationFrom; 
      vm.cos = $scope.locationFrom.geometry.location.lat().toString() + "," + $scope.locationFrom.geometry.location.lng().toString(); 
     } 
    }); 

schließlich in der Ansicht ich verwende vm.cos als Attribut der Position

<ng-map center="[40.74, -74.18]"> 
      <marker position="vm.cos"></marker> 
</ng-map> 

In vm.cos I korrekte Länge und Breite getrennt habe mit ",". jedoch

Arbeits Diese Lösung wird nicht, wenn ich statische Position z

<marker position="-25.363882,131.044922"></marker> 

Es als supossed funktioniert.

Wer hat eine Idee?

PS. Ich verwende https://ngmap.github.io/

Antwort

0

Was ich verstanden habe, ist, dass Sie Marker auf die Position Benutzer Typen setzen möchten.
Dafür brauchen Sie keine Uhr, da angularjs automatisch bindet.
Sie können folgenden Code beziehen.
Script Pflicht

<script type="text/javascript" src="ng-map.js"></script> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
</script> 
<script src= "http://maps.google.com/maps/api/js?key=YOUR_KEY&libraries=places"></script> 


HTML-Code

<ng-map center="{{mapCenter}}" zoom="13"> 
    <marker animation="DROP" position="{{mapCenter}}"> </marker> 
</ng-map> 
<input places-auto-complete types="['geocode']" on-place-changed = "myCallback(place)" 
ng-model="mapCenter" component-restrictions="{country:'in'}" /> 

-Controller

$scope.mapCenter="pune"; 
NgMap.getMap().then(function(map) { 
    console.log(map.getCenter()); 
    console.log('markers', map.markers); 
});