谷歌与放置角JS自动完成 [英] Google places autocomplete with angular js
本文介绍了谷歌与放置角JS自动完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让谷歌的地方有角的js自动完成的工作。这里是的jsfiddle -
模式是不会得到更新after'place_change事件。这是得到更新输入的变化。
下面是HTML code -
HTML
＆LT;机身NG-应用=mapApp＆GT;
＆LT; DIV NG控制器=MapController＆GT;
＆LT;输入ID =从类型=文本NG模型=user.from占位符=输入地址级=NG-原始NG-有效自动完成=关闭＆GT;
＆LT;输入类型=隐藏NG-模式=user.fromLat＆GT;
＆LT;输入类型=隐藏NG-模式=user.fromLng＆GT;
＆所述p为H.; {{user.from}}＆所述峰; br＆GT; {{'纬度：'+ user.fromLat +'，Longitutde：'+ user.fromLng}}＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
Java脚本
VAR mapApp = angular.module（'mapApp'，[]）;mapApp.controller（'MapController'，函数（$范围）{
$ scope.user = {'从'：''，'fromLat'：''，'fromLng'：''};
VAR的选择= {
componentRestrictions：{国家：在}
};
VAR inputFrom =的document.getElementById（'从'）;
VAR autocompleteFrom =新google.maps.places.Autocomplete（inputFrom，期权）;
google.maps.event.addListener（autocompleteFrom，'place_changed'，函数（）{
VAR地方= autocompleteFrom.getPlace（）;
$ scope.user.fromLat = place.geometry.location.lat（）;
$ scope.user.fromLng = place.geometry.location.lng（）;
$ scope.user.from = place.formatted_address;
}）;
}）;
解决方案
您需要的时候 place_change 事件被炒鱿鱼，所以它知道何时更新DOM告诉角度。你可以通过调用 $范围。$适用（）。例如：
google.maps.event.addListener（autocompleteFrom，'place_changed'，函数（）{
VAR地方= autocompleteFrom.getPlace（）;
$ scope.user.fromLat = place.geometry.location.lat（）;
$ scope.user.fromLng = place.geometry.location.lng（）;
$ scope.user.from = place.formatted_address;
$ $范围适用于（）。
}）;
I am trying to make google places autocomplete work with angular js. Here is jsfiddle - Model is not getting updated after'place_change' event. It is getting updated on change of input.
Below is html code - HTML
<body ng-app="mapApp">
<div ng-controller="MapController">
<input id="from" type="text" ng-model="user.from" placeholder="Type Address" class="ng-pristine ng-valid" autocomplete="off">
<input type="hidden" ng-model="user.fromLat">
<input type="hidden" ng-model="user.fromLng">
<p>{{user.from}} <br> {{'Latitude : ' + user.fromLat + ', Longitutde : ' + user.fromLng}}</p>
</div>
</body>
Java Script
var mapApp = angular.module('mapApp', []);
mapApp.controller('MapController', function ($scope) {
$scope.user = {'from': '', 'fromLat': '', 'fromLng' : ''};
var options = {
componentRestrictions: {country: "in"}
};
var inputFrom = document.getElementById('from');
var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
var place = autocompleteFrom.getPlace();
$scope.user.fromLat = place.geometry.location.lat();
$scope.user.fromLng = place.geometry.location.lng();
$scope.user.from = place.formatted_address;
});
});
解决方案
You need to tell angular when the place_change event gets fired so it knows when to update the DOM. You can do that by calling $scope.$apply(). e.g.:
google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
var place = autocompleteFrom.getPlace();
$scope.user.fromLat = place.geometry.location.lat();
$scope.user.fromLng = place.geometry.location.lng();
$scope.user.from = place.formatted_address;
$scope.$apply();
});
这篇关于谷歌与放置角JS自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
