Автозаполнение адреса + Google Maps API - PullRequest
Новая
       21

Автозаполнение адреса + Google Maps API

21 голосов
/ 31 октября 2010

Я хочу представить своим пользователям текстовое поле, в котором они могут ввести свой адрес.Когда они вводят свой адрес, я хочу предоставить пользователям предложения / прогнозы того, какой адрес они пытаются набрать.Меня также беспокоит актуальность этого адреса (например, что адрес не является адресом на полпути по всему миру).

Возможно ли это?Я использую jQuery.

Ответы [ 5 ]

53 голосов
/ 28 июля 2011

Вы можете использовать Google Places API для автозаполнения адреса. Когда адрес выбран, поле address_components содержит структурированные адресные данные (например, улица, город, страна) и может быть легко преобразовано в отдельные поля.

Вот короткая рабочая демонстрация: 

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>
7 голосов
/ 28 ноября 2011

Взгляните на адрес-предложение и демо .Он реализован с помощью jQuery и Google Maps API геокодирования.

6 голосов
/ 02 января 2016

Рабочая версия @Maksym Kozlenko answer Для тех, кто хочет увидеть это в действии. 

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>
6 голосов
/ 21 ноября 2012

https://github.com/ubilabs/geocomplete должно работать на вас. При необходимости вы также сможете показать карту.

Если вы используете плагин без карты, вы должны отобразить логотип "powered by Google" под текстовым полем.

2 голосов
/ 13 июля 2016

Вы должны использовать ключ API.

См. Ссылку здесь. 

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>

    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script>
        <script>
            function initMap(){
                var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    var place = autocomplete.getPlace();
                    console.log(place.address_components);
                });
            }
        </script>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...