在自动完成选项中解析Google地图中的address_components
当选择自动完成列表时，我有以下代码来解析country ：
$('#spot_address').autocomplete({ // This bit uses the geocoder to fetch address values source: function(request, response) { geocoder.geocode( {'address': request.term }, function(results, status) { // Get address_components for (var i = 0; i < results[0].address_components.length; i++) { var addr = results[0].address_components[i]; var getCountry; if (addr.types[0] == 'country') getCountry = addr.long_name; } response($.map(results, function(item) { return { label: item.formatted_address, value: item.formatted_address, latitude: item.geometry.location.lat(), longitude: item.geometry.location.lng(), country: getCountry } })); }) }, // This bit is executed upon selection of an address select: function(event, ui) { // Get values $('#spot_country').val(ui.item.country); $('#spot_lat').val(ui.item.latitude); $('#spot_lng').val(ui.item.longitude); var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); marker.setPosition(location); map.setCenter(location); }, // Changes the current marker when autocomplete dropdown list is focused focus: function(event, ui) { var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); marker.setPosition(location); map.setCenter(location); } });
但是，上面的代码不起作用，并且在解析国家时，只解析自动完成的第一个结果，这对于数组results[0]是重要的，因为它只获取第一个结果。
我试图将它移动到select函数，但是select ui只包含formatted_address ， longitude和latitude ，但不包含address_components 。
选择自动填充列表项时，我该怎么做才能发送正确的country ？
非常感谢。
一般解决方案
var address_components = results[0].address_components; var components={}; jQuery.each(address_components, function(k,v1) {jQuery.each(v1.types, function(k2, v2){components[v2]=v1.long_name});});
现在你的components看起来像这样：
street_number: "1100", route: "E Hector St", locality: "Conshohocken", political: "United States", administrative_area_level_3: "Whitemarsh"… administrative_area_level_1: "Pennsylvania" administrative_area_level_2: "Montgomery" administrative_area_level_3: "Whitemarsh" country: "United States" locality: "Conshohocken" political: "United States" postal_code: "19428" route: "E Hector St" street_number: "1100"
你可以这样查询：
components.country
我在这里再次回答我自己的问题。 以下是完整的工作代码：
$('#spot_address').autocomplete({ // This bit uses the geocoder to fetch address values source: function(request, response) { geocoder.geocode( {'address': request.term }, function(results, status) { response($.map(results, function(item) { // Get address_components for (var i = 0; i < item.address_components.length; i++) { var addr = item.address_components[i]; var getCountry; if (addr.types[0] == 'country') getCountry = addr.long_name; } return { label: item.formatted_address, value: item.formatted_address, latitude: item.geometry.location.lat(), longitude: item.geometry.location.lng(), country: getCountry } })); }) }, // This bit is executed upon selection of an address select: function(event, ui) { // Get values $('#spot_country').val(ui.item.country); $('#spot_lat').val(ui.item.latitude); $('#spot_lng').val(ui.item.longitude); var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); marker.setPosition(location); map.setCenter(location); }, // Changes the current marker when autocomplete dropdown list is focused focus: function(event, ui) { var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); marker.setPosition(location); map.setCenter(location); } });
在@Full Decent的答案中详细说明了lodash的一个版本：
_.each(address_components, function(k, v1) { _.each(address_components[v1].types, function(k2, v2){ components[address_components[v1].types[v2]] = address_components[v1].long_name }); });
在AngularJS控制器中，它可能是这样的：
function NewController() { var vm = this; vm.address = null; vm.placeService = null; activate(); function activate() { vm.placeService = new google.maps.places.PlacesService(document.getElementById("map")); } function getAddressComponent(address, component, type) { var element = null; angular.forEach(address.address_components, function (address_component) { if (address_component.types[0] == component) { element = (type == 'short') ? address_component.short_name : address_component.long_name; } }); return element; } function getAddressDetail(addressId) { var request = { placeId: addressId }; vm.placeService.getDetails(request, function(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { vm.address = { countryCode: getAddressComponent(place, 'country', 'short'), countryName: getAddressComponent(place, 'country', 'long'), cityCode: getAddressComponent(place, 'locality', 'short'), cityName: getAddressComponent(place, 'locality', 'long'), postalCode: getAddressComponent(place, 'postal_code', 'short'), streetNumber: getAddressComponent(place, 'street_number', 'short') }; console.log(vm.address); } }); } }
这在AngularJS中对我有用;
// Function converts GPS co-ordinates to a locality name function showLocation(LatLng) { geocoder.geocode({'latLng': LatLng}, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { console.log(results[0]); var myLocation; for (var i = 0; i < results[0].address_components.length; i++) { var addr = results[0].address_components[i]; var getCountry; var getAdministrative; var getLocality; if (addr.types[0] == 'locality') { getLocality = addr.long_name; console.log(getLocality); myLocation = getLocality+ ', '; } if (addr.types[0] == 'administrative_area_level_1') { getAdministrative = addr.long_name; console.log(getAdministrative); myLocation += getAdministrative + ', '; } if (addr.types[0] == 'country') { getCountry = addr.long_name; console.log(getCountry); myLocation += getCountry; } } $scope.locality = myLocation; console.log(myLocation); } }) };
我认为您需要将响应处理程序拆分为新函数。
source: function(request, response) { geocoder.geocode( {'address': request.term }, function(results, status) { // Get address_components for (var i = 0; i < results[0].address_components.length; i++) { var addr = results[0].address_components[i]; var getCountry; if (addr.types[0] == 'country') getCountry = addr.long_name; } response($.map(results, function(item) { getDetails(item); })); }) },
将其移到.autocomplete函数之外：
function getDetails(item) { return { label: item.formatted_address, value: item.formatted_address, latitude: item.geometry.location.lat(), longitude: item.geometry.location.lng(), country: getCountry } }
这与Full Decent的function相同，但是为AngularJS编写：
function getAddressComponentByPlace(place) { var components; components = {}; angular.forEach(place.address_components, function(address_component) { angular.forEach(address_component.types, function(type) { components[type] = address_component.long_name; }); }); return components; }
我一直在使用以下方法：
var city = getAddressComponent(place, 'locality', 'long_name'); var state = getAddressComponent(place, 'administrative_area_level_1', 'short_name'); var postalCode = getAddressComponent(place, 'postal_code', 'short_name'); var country = getAddressComponent(place, 'country', 'long_name'); function getAddressComponent(place, componentName, property) { var comps = place.address_components.filter(function(component) { return component.types.indexOf(componentName) !== -1; }); if(comps && comps.length && comps[0] && comps[0][property]) { return comps[0][property]; } else { return null; } }
Country始终是从Geocoder返回的数组的最后一个。
这是我的解决方案 –
geocoder.geocode( {'address': request.term }, function(results, status) { var location_country = results[0].address_components[results[0].address_components.length - 1].long_name; });
希望这可以帮助。