javascript - 住所のみをgoogle.maps.event.addListener（）に表示します

Question

を使用してユーザーアドレスを取得する小さな関数を作成しましたgoogle.maps.event.addListener()。これがjsFiddleです。

streetユーザーが入力を終えてフィールドからフォーカスアウトしたときを除いて、すべてがまさに私が望むものですinput。

現時点では、次のようになっています。

しかし、私はそれをこのようにしたいと思います：

助けてくれてありがとう。乾杯。

Answer 1

短い遅延を使用してstreetAddressを適用します

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

Answer 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();