只显示google.maps.event.addListener()中的街道地址

我编写了一个小函数,它将使用google.maps.event.addListener()获取用户地址。 这是jsFiddle 。

一切都是我想要的,除了当用户完成打字并从street领域聚焦时,我只想在input街道地址。

目前它看起来像这样:

现在

但我希望它是这样的:

在此处输入图像描述

谢谢你的帮助。 干杯。

使用短暂延迟来应用streetAddress

 setTimeout(function(){$('#address').val(streetAddress);},50); 

上述解决方案非常适合自动填充单个地址字段。 这是一个带有偏置结果选项的实现,但是我在使用边界来偏置自动完成字段的结果时遇到了问题。 这是我的jsFiddle 。

 var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(33.89028890,-117.5617340), new google.maps.LatLng(33.7706850,-117.6639850) ); var updateAddress = { autocomplete: new google.maps.places.Autocomplete($("#address")[0], { bounds: defaultBounds, types: ['geocode'], componentRestrictions: {country: 'us'} }), event: function(){ var self = this; google.maps.event.addListener(self.autocomplete, 'place_changed', function() { var place = self.autocomplete.getPlace(), address = place.address_components, streetAddress = '', suburb = '', state = '', zip = '', country = ''; for (var i = 0; i < address.length; i++) { var addressType = address[i].types[0]; if (addressType == 'subpremise') { streetAddress += address[i].long_name + '/'; } if (addressType == 'street_number') { streetAddress += address[i].long_name + ' '; } if (address[i].types[0] == 'route') { streetAddress += address[i].long_name; } if (addressType == 'locality') { suburb = address[i].long_name; } if (addressType == 'administrative_area_level_1') { state = address[i].long_name; } if (addressType == 'postal_code') { zip = address[i].long_name; } if (addressType == 'country') { country = address[i].long_name; } } // update the textboxes setTimeout(function(){$('#address').val(streetAddress);},50); $('#suburb').val(suburb); $('#state').val(state); $('#zip').val(zip); }); } }; updateAddress.event();