Подтвердить что ты не робот

Выбор силы автозаполнения в Google Адресах

Я использую JavaScript, который Google устанавливает autocomplete API v3. Он работает нормально, но мне было интересно, есть ли способ принудительного выбора из автозаполнения, то есть вход, который не примет никакого текста свободной формы. Я посмотрел на документы и не видел такого варианта, но решил, что попрошу просто быть в безопасности. Я уверен, что я мог бы разработать способ сделать это с помощью JavaScript, но предпочел бы использовать уже построенный метод, если он доступен. Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

API Google Адресов в настоящее время не поддерживает эту функцию. Если вы считаете, что это будет полезная функция, отправьте Places API - Feature Request.

Ответ 2

Собственно, мы сделали следующее:
- Каждый раз, когда местоположение выбирается из списка Auto complete, мы заполняем некоторые скрытые поля некоторыми полями, поступающими из ответа JSON (название города, название страны, долготу и широту)
- Когда форма отправлена, мы проверяем, имеют ли эти поля значения, если они этого не делают, это означает, что пользователь вместо того, чтобы выбирать местоположение из списка, он просто сам ввел значение.

Он не решает проблему в JS-способе, но все-таки это трюк просто отлично!

Ответ 3

 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"
    type="text/javascript"></script>
<script>
    var IsplaceChange = false;
    $(document).ready(function () {            
        var input = document.getElementById('txtlocation');
        var autocomplete = new google.maps.places.Autocomplete(input, { types: ['(cities)'] });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();

            IsplaceChange = true;
        });

        $("#txtlocation").keydown(function () {
            IsplaceChange = false;
        });

        $("#btnsubmit").click(function () {

            if (IsplaceChange == false) {
                $("#txtlocation").val('');
                alert("please Enter valid location");
            }
            else {
                alert($("#txtlocation").val());
            }

        });
    });
</script>







Ответ 4

Следующее решение помогло мне (с помощью jQuery). Идея состоит в том, чтобы использовать событие blur() для принудительного вызова последнего выбранного адреса, когда вход теряет фокус.

Мы добавляем таймаут, чтобы предотвратить конфликт между blur и событиями place_changed.

Рассмотрим следующий HTML:

<input type="text" placeholder="Your address" id="autocomplete">

И следующий JavaScript:

var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),
    {types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress);

var currentAddress = {
    line_1: "",
    line_2: "",
    zipcode: "",
    city: "",
    country: "",
    lat: "",
    lng: "",
    one_liner: ""
};

function fillInAddress() {
    var place = this.autocomplete.getPlace();
    // reset the address
    currentAddress = {
        line_1: "",
        line_2: "",
        zipcode: "",
        city: "",
        country: "",
        lat: "",
        lng: "",
        one_liner: place.formatted_address
    };
    // store relevant info in currentAddress
    var results = place.address_components.reduce(function(prev, current) {
        prev[current.types[0]] = current['long_name'];
        return prev;
    }, {})
    if (results.hasOwnProperty('route')) {
        currentAddress.line_1 = results.route;
    }
    if (results.hasOwnProperty('street_number')) {
        currentAddress.line_1 = results.street_number + " " + currentAddress.line_1;
    }
    if (results.hasOwnProperty('postal_code')) {
        currentAddress.zipcode = results.postal_code;
    }
    if (results.hasOwnProperty('locality')) {
        currentAddress.city = results.locality;
    }
    if (results.hasOwnProperty('country')) {
        currentAddress.country = results.country;
    }
    currentAddress.lat = Number(place.geometry.location.lat()).toFixed(6);
    currentAddress.lng = Number(place.geometry.location.lng()).toFixed(6);
}

$('#autocomplete').blur(function() {
    var address = $('#autocomplete').val();
    // we set a timeout to prevent conflicts between blur and place_changed events
    var timeout = setTimeout(function() {
        // release timeout
        clearTimeout(timeout);
        if (address !== currentAddress.one_liner) {
            $('#autocomplete').val(currentAddress.one_liner);
        }
    }, 500);
});

Надеюсь, это поможет.

Ответ 5

У меня была та же проблема, ниже - это функция, с которой я столкнулся с обходом. Это можно использовать в сочетании с событием, таким как onchange или onkeyup. Надеюсь, это поможет!

//Arguments:

address - string containing the place that you want to validate address_success_div - div object specifically used for displaying validation

function is_location_valid(address, address_success_div)
{
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( {"address": address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK)
        {
            address_success_div.innerHTML = "SUCCESS";
        }
        else
        {
            address_success_div.innerHTML = "FAILURE";
        }
    });
}

Ответ 6

    var options = {
        language: 'en',
        types: ['(cities)'],
    };

    var input = document.getElementById('city');
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    input.addEventListener("change", function(){
        input.value = "";
    });

Выход из значения при изменении ввода работает для меня. Это заставляет использовать Google Places.

Ответ 7

  Я решил свою проблему, используя этот код, найденный здесь

<asp:TextBox runat="server" ID="TextBox1" />
<input type="button" id="btnSubmit" name="name" value="Validate" />
<div id="dvMap">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBE1J5Pe_GZXBR_x9TXOv6TU5vtCSmEPW4"></script>
<script type="text/javascript">
    var isPlaceChanged = false;
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('<%= TextBox1.ClientID %>'));
        google.maps.event.addListener(places, 'place_changed', function () {
            isPlaceChanged = true;
            var geocoder = new google.maps.Geocoder();
            var place = places.getPlace();
            var address = place.formatted_address;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map });

                } else {
                    alert("Request failed.")
                }
            });
        });
    });
    $(function () {
        $("#TextBox1").keydown(function () {
            isPlaceChanged = false;
        });

        $("#btnSubmit").click(function () {
            if (!isPlaceChanged) {
                $("#TextBox1").val('');
                alert("Please Enter valid location");
            }
            else {
                alert($("#TextBox1").val());
            }
        });
    });
</script>

Ответ 8

Я изменил немного кода из примера мест Google.

<input type="text" id="address" onchange="check();" required>

    function check() {
        console.log("check");
            try {
                var place = autocomplete.getPlace();
                console.log(place);
                if (!place.geometry) {
                    // User entered the name of a Place that was not suggested and
                    // pressed the Enter key, or the Place Details request failed.
                    window.alert("Please enter address suggested by google");
                    return;
                 }
                 } catch (err) {
                     window.alert("Please enter address suggested by google");
    }

}

Ответ 9

ОВЗ Мне удалось это сделать, создав объект автозаполнения каждый раз, когда пользователь фокусирует поле ввода и проверяет его значение каждый раз, когда он размывается:

var autocompleteField;
var input = document.getElementById('YOUR_INPUT');

$('#YOUR_INPUT').focus(function(e){

    if(autocompleteField){
        autocompleteField=null;
    }
    autocompleteField = new google.maps.places.Autocomplete(input);

});

$('#YOUR_INPUT').blur(function(e){

    var results = autocompleteField.getPlace();
    if(!results){
        $(this).attr('value','');
    }
});

Ответ 10

Я решил проблему, сочетающую предложения по нескольким различным ответам отсюда. Мое текстовое поле, в которое пользователь вводит адрес, называется txtPlaces. Здесь мой код:

var pac_input = document.getElementById('txtPlaces');

(function pacSelectFirst(input) {
    // store the original event binding function
    var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;

    function addEventListenerWrapper(type, listener) {
        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
        // and then trigger the original listener.
        if (type == "keydown") {
            var orig_listener = listener;
            listener = function(event) {
                var suggestion_selected = $(".pac-item-selected").length > 0;
                if ((event.which == 13 || event.which == 9) && !suggestion_selected) {
                    var simulated_downarrow = $.Event("keydown", {
                        keyCode: 40,
                        which: 40
                    });
                    orig_listener.apply(input, [simulated_downarrow]);
                }

                orig_listener.apply(input, [event]);
            };
        }



        _addEventListener.apply(input, [type, listener]);
    }

    input.addEventListener = addEventListenerWrapper;
    input.attachEvent = addEventListenerWrapper;

    var autocomplete = new google.maps.places.Autocomplete(input);

})(pac_input);

$('#txtPlaces').blur(function(e){
    selectFirstAddress(pac_input);
});


////Ensuring that only Google Maps adresses are inputted
function selectFirstAddress (input) {
    google.maps.event.trigger(input, 'keydown', {keyCode:40});
    google.maps.event.trigger(input, 'keydown', {keyCode:13});
}

Это будет правильно реагировать на клавиши Enter или Tab, а также когда пользователь выбирает другое поле. Надеюсь, это поможет!

Ответ 11

WTF, люди?!?!? У Google часто нет правильной информации. Не используйте их автозаполнение API для принудительного выбора! Вот почему тонна веб-сайтов не позволяет мне пользоваться их услугами: я живу где-то, где Google портит адрес. И я не одинок.

Если необходимо, используйте проверку адреса USPS - по крайней мере, они более свежие. В идеале разрешить автозаполнение, но разрешить ручное переопределение; перестань лениться и усложнять жизнь многим из нас!