大佬教程收集整理的这篇文章主要介绍了使用angularjs进行地理编码服务,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在角度上实现像this page这样的东西.
请帮帮我.
app.directive('googlePlaces',function(){ return { reStrict:'E',replace:true,// transclude:true,scope: {LOCATIOn:'='},template: '<input type="text" id="fulladdress" name="fulladdress" ng-model="enterprise.fulladdress" class="form-control text-field" placeholder="">',link: function($scope,elm,attrs){ var autocomplete = new google.maps.places.Autocomplete($("#country")[0],{}); google.maps.event.addListener(autocomplete,'place_changed',function() { var place = autocomplete.getPlace(); $scope.LOCATIOn = place.geometry.LOCATIOn.lat() + ',' + place.geometry.LOCATIOn.lng(); $scope.$apply(); }); } } });
和HTML:
<div class="form-group enterprise-form"> <label>Full Address</label> <google-places LOCATIOn=LOCATIOn></google-places> </div>
我想填充两个或三个以上的字段lat,lng,邮政编码.我是否可以扩展我的指令来实现这一目标,如果是这样的话?
自动完成侦听器’place_change’发生在angular的$digest循环之外,因此您应该使用$evalAsync调用fillInAddress,否则在下一个摘要之前您将看不到表单更改.
纬度,经度存储在geometry.LOCATIOn中的位置对象上.
var app = angular.module('app',[]); app.controller('myController',function($scopE) { var components = { street_number: 'short_name',route: 'long_name',locality: 'long_name',administrative_area_level_1: 'short_name',country: 'long_name',postal_code: 'short_name' }; var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),{ types: ['geocode'] }); google.maps.event.addListener(autocomplete,function() { $scope.$evalAsync(fillInAddress); }); $scope.formData = {}; $scope.ll = {}; function fillInAddress() { var place = autocomplete.getPlace(); Object.keys(components).forEach(function(component) { $scope.formData[component] = ''; document.getElementById(component).disabled = false; }); place.address_components.forEach(function(component) { var addresstype = component.types[0]; if (components[addressType]) { $scope.formData[addressType] = component[components[addressType]]; } }); $scope.ll = { lat: place.geometry.LOCATIOn.G,lon: place.geometry.LOCATIOn.K }; } });
#LOCATIOnField,#controls { position: relative; width: 480px; } #autocomplete { position: absolute; top: 0px; left: 0px; width: 99%; } .label { text-align: right; font-weight: bold; width: 100px; color: #303030; } #address { border: 1px solid #000090; BACkground-color: #f0f0ff; width: 480px; padding-right: 2px; } #address td { font-size: 10pt; } .field { width: 99%; } .slimField { width: 80px; } .wideField { width: 200px; } #LOCATIOnField { height: 20px; margin-bottom: 2px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> <div ng-app='app' ng-controller='myController'> <div id="LOCATIOnField"> <input id="autocomplete" placeholder="Enter your address" type="text"> </div> <table id="address"> <tr> <td class="label">Street address</td> <td class="slimField"> <input ng-model="formData.street_number" class="field" id="street_number" disabled="true" type="text"> </td> <td class="wideField" colspan="2"> <input ng-model="formData.route" class="field" id="route" disabled="true"> </td> </tr> <tr> <td class="label">City</td> <td class="wideField" colspan="3"> <input ng-model="formData.locality" class="field" id="locality" disabled="true"> </td> </tr> <tr> <td class="label">State</td> <td class="slimField"> <input ng-model="formData.administrative_area_level_1" class="field" id="administrative_area_level_1" disabled="true"> </td> <td class="label">Zip code</td> <td class="wideField"> <input ng-model="formData.postal_code" class="field" id="postal_code" disabled="true"> </td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"> <input ng-model="formData.country" class="field" id="country" disabled="true"> </td> </tr> </table> <pre>{{ formData | json }}</pre> <pre>{{ ll | json }}</pre> </div>
以上是大佬教程为你收集整理的使用angularjs进行地理编码服务全部内容,希望文章能够帮你解决使用angularjs进行地理编码服务所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。