Ограничить вывод автозаполнения Google только городом - PullRequest
Новая
       24

Ограничить вывод автозаполнения Google только городом

0 голосов
/ 29 июня 2018

У меня есть следующий код для поиска городов из данной страны с помощью API Google Auto Complete: 

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false&libraries=places&region=uk" type="text/javascript"></script>

     function initialize() {
       var input = document.getElementById('searchTextField');
       var options = {
         types: ['(cities)'],
         componentRestrictions: { country: "uk" }
     };
       var autocomplete = new google.maps.places.Autocomplete(input, options);
     }
 google.maps.event.addDomListener(window, 'load', initialize);

Я добавил регион в сценарии src, чтобы не включать страну в вывод.
Например, если я наберу Ло, я получу только Лондон, а не Лондон, Великобритания

Однако, поскольку я получаю страну, ее ISO-код из раскрывающегося списка, мне нужно иметь возможность изменять как componentRestrictions, так и регион в URL-адресе Google API. Есть идеи, как это сделать? Я знаю, что могу выбрать страну из выпадающего списка, как показано ниже: 

var country= $('#CountryDropdown');

Как передать страну var в компонент Restrictions и регион?

1 Ответ

0 голосов
/ 29 июня 2018

У меня была такая же проблема, и я решил ее этим. Надеюсь, что это поможет вам. 

<script src="https://maps.googleapis.com/maps/api/js?key=Yourkey&v=3.exp&libraries=places"></script>

function initialize() {

    var input = document.getElementById('FullAddress');
    var options = {
        types: ['address'],
        componentRestrictions: { country: 'uk' }
    };
    autocomplete = new google.maps.places.Autocomplete(input, options);

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        // 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;
        }
        $("#Latitude").val(place.geometry.location.lat());
        $("#Longitude").val(place.geometry.location.lng());

        // 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;
            }
        }
    });
}
...