从ngMap获取坐标自动完成

时间:2017-04-10 18:25:44

标签: javascript angularjs google-maps ng-map

Google地图允许用户从自动完成库中获取坐标。我似乎找不到使用ngMap的方法,而不涉及“控制器为”语法。我想获取坐标并将它们输出到只有$ scope的控制台。

var app = angular.module("App", ["ngMap"]);

app.controller("MyCtrl", function ($scope, NgMap) {

$scope.placeChanged = function placeChanged() {      
    var place = this.getPlace();
    console.log(place.place.geometry.location)
  };
  
});
<html ng-app="App">

<script src="https://maps.google.com/maps/api/js?libraries=places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-controller="MyCtrl">
<input type="text" name="address" places-auto-complete ng-model="address" on-place-change="placeChanged()">
</div>

</html>

1 个答案:

答案 0 :(得分:0)

指令places-auto-complete在NgMap中有on-place-changed

HTML:

<div ng-controller="MyCtrl">
  <input places-auto-complete ng-model='address' on-place-changed="getCoords()" />
</div>

脚本:当地点更改ng-model更新时

var app = angular.module("App", ["ngMap"]);
app.controller("MyCtrl", function($scope, NgMap) {
  $scope.address = '';
  $scope.getCoords = function() { 
    NgMap.getGeoLocation($scope.address).then(function(latlng) {
      console.log(latlng.lat());
      console.log(latlng.lng());
    });
  };
})