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

时间:2012-11-23 06:43:52

标签: javascript jquery google-maps google-maps-api-3 autocomplete

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

一切都正是我想要的,除了用户完成输入并从street字段中聚焦时,我只想要input中的街道地址。

目前它看起来像这样:

now

但我希望它是这样的:

enter image description here

非常感谢您的帮助。欢呼声。

2 个答案:

答案 0 :(得分:3)

使用短暂延迟来应用streetAddress

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

答案 1 :(得分:2)

上述解决方案非常适合自动填充个别地址字段。这是一个带有偏向结果的选项的实现,但是我在使用边界来偏置自动完成字段的结果时遇到了问题。这是我的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();