Повторная инициализация initAutocomplete API Карт Google Помещает автозаполнение в динамически загруженную цель элемента ввода текста HTML - PullRequest
Новая
       12

Повторная инициализация initAutocomplete API Карт Google Помещает автозаполнение в динамически загруженную цель элемента ввода текста HTML

0 голосов
/ 25 января 2019

На начальной странице загрузите этот скрипт:

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

и функции, которыми я поделился ниже, загружаются для поддержки автозаполнения Карт Google (JS) с библиотекой мест.

Функция автозаполнения работает, если целевой текстовый элемент ввода изначально загружается вместе со страницей;однако, когда я позже динамически загружаю его (как часть события щелчка) ($(element).html('<input type="text" id="location" />');), автозаполнение не работает.

Я попытался повторно инициализировать initAutocomplete, снова вызывая функцию после загрузкиновый элемент "location" (initAutocomplete()), но все еще не работает.Можно ли повторно инициализировать initAutocomplete() для динамически сгенерированной цели автозаполнения (<input type="text" id="location" />)? 

var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('location')),
        {types: ['geocode']});

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

function fillInAddress() {
    // 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 fill 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;
        }
    }
    document.getElementById("lat").value = place.geometry.location.lat();
    document.getElementById("lng").value = place.geometry.location.lng();
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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());
        });
    }
}
...