javascript - 实现放置自动完成地址表单时无法读取未定义的属性“address

问题描述

我正在尝试在我的网站上实施 Google Place Autocomplete Address Form，但我遇到了一些问题。

到目前为止，我的目标是好的输入。当我单击时，我会看到提供对我的职位的访问权限的警报。当我输入文本时，谷歌提供了 5 个地址，但是当我点击一个时，没有任何附加内容。目前，我只针对要由 Google 填写的邮政编码和城市。

我有以下错误消息：

无法读取未定义的属性“address_components”

Jquery 被实现了，我用这样的方式编写了我的关键 API：

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MyKey&libraries=places">
</script>

以下所有代码都放在一个 .js 文件中：


$(document).ready(function () {

    let addressField = document.getElementById('dwfrm_profile_address_address1');
    let autocomplete;
    let componentForm = {
        dwfrm_profile_address_city: 'long_name',
        dwfrm_profile_address_postal: 'short_name'
    };


    addressField.addEventListener('focus', function () {
        geolocate()
    });

    addressField.addEventListener('blur', function () {
        initAutocomplete(addressField)
    });

    function initAutocomplete(addressField) {
        // Create the autocomplete object, restricting the search predictions to
        // geographical location types.
        autocomplete = new google.maps.places.Autocomplete(
            addressField, { types: ['geocode'] });

            // Avoid paying for data that you don't need by restricting the set of
            // place fields that are returned to just the address components.
            autocomplete.setFields(['address_components']);

            // When the user selects an address from the drop-down, populate the
            // address fields in the form.
            autocomplete.addListener('place_changed', fillInAddress(autocomplete));
        }

        function fillInAddress(autocomplete) {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();

            for (var component in componentForm) {
                document.getElementById(component).value = '';
                document.getElementById(component).disabled = false;
            }

            // Get each component of the address from the place details,
            // and then fill-in the corresponding field on the form.
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i][componentForm[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }
        }
                    
        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({ 
                        center: geolocation, radius: position.coords.accuracy });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }
        initAutocomplete();
        fillInAddress();
        geolocate();
    });

谢谢您的帮助！

标签： javascriptgoogleplacesautocomplete

javascript - 实现放置自动完成地址表单时无法读取未定义的属性“address_components”

问题描述

解决方案

推荐阅读