К концу этого урока вы сможете:

Что такое автозаполнение?

Автозаполнение — это часть Google Places Library в Google Map Javascript API.

Мы собираемся обсудить, как использовать API автозаполнения для отображения предлагаемых адресов в раскрывающемся списке, когда пользователи начинают вводить свои адреса в поле ввода.

Это очень полезно, когда пользователь случайно отказывается делиться своим местоположением или когда HTML Geolocation API не поддерживает его браузер. Мы можем легко заставить эту функциональность работать с помощью автозаполнения.

Первое, что нам нужно сделать, это включить библиотеку Google Places в файл index.html перед закрывающим тегом body.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>

⚠️ Обязательно добавьте свой ключ API в URL
API Карт Google → Получить ключ API

Убедитесь, что библиотеки Maps JavaScript API и Places API включены в Google Cloud Console.

Как видите, URL-адрес является общим, и в конце я добавил два параметра запроса.

Экземпляр автозаполнения

Следующее, что мы хотим сделать, это создать экземпляр объекта автозаполнения.

new google.maps.places.Autocomplete();

Потребуется несколько параметров. Основной — это входной элемент DOM, в который мы хотим добавить функциональность автозаполнения.

Для этого установите атрибут id с именем autocomplete в поле ввода:

<input type="text" placeholder="Enter your address" id="autocomplete" />

Затем в скобках добавьте входной элемент DOM в качестве первого аргумента.

new google.maps.places.Autocomplete(
      document.getElementById("autocomplete");
  );

🔥 Рекомендуется
Видеокурс Vue.js + Google Maps API для начинающих

Ограничить предлагаемые адреса определенным регионом

Давайте посмотрим, как мы можем показать адреса из определенного региона, близкого к местоположению пользователя, чтобы его или ее адрес было легко найти с минимальным набором текста.

Например, я живу в Канаде, и когда я набираю 1 2 3, предлагаются адреса из США и Тайваня.

Я все еще могу получить свой адрес, но это занимает больше времени.

Допустим, я хочу сначала показать адреса улиц Оттавы, прежде чем показывать предложения из других городов или стран.

Для этого нам нужны географические координаты города, в данном случае Оттавы. Вы можете найти эту информацию, выполнив простой поиск, например, «Географические координаты Оттавы, Онтарио»… и вот она.

На самом деле это координаты DD (десятичная степень). Нам нужны простые стандартные координаты.

Нажмите на первую ссылку, и простой стандарт станет первым вариантом.

Теперь, когда у нас есть координаты, чтобы добавить их в объект автозаполнения, нам нужно передать объект Javascript в качестве второго аргумента.

После запятой создайте объект Javascript и определите внутри него свойство с именем bounds. Установите его значение в объект LatLng, передав значения координат Оттавы в качестве аргументов.

new google.maps.places.Autocomplete(
   document.getElementById("autocomplete"), {
      bounds: new google.maps.LatLngBounds(45.4215296, -75.6971931)
   }
)

Как видите, сначала отображаются все адреса Оттавы, за которыми следуют другие совпадающие адреса.

Давайте изменим некоторые стили выпадающего списка, чтобы они соответствовали нашей теме.

На этом изображении показано, какие классы CSS нам нужны, чтобы изменить стиль списка.

Во-первых, избавьтесь от значка слева от каждого адреса, который является классом .pac-icon.

Внутри класса .pac-icon добавьте display: none;, чтобы скрыть это.

<style>
    .pac-icon {
        display: none;
    }
</style>

Давайте увеличим отступы для каждого элемента. Целевым классом CSS для этого будет pac-item. Дайте отступ 10 пикселей для всех сторон.

Затем увеличьте размер шрифта текста до 16 пикселей и давайте изменим курсор на указатель (символ руки).

Наконец, задайте состояние наведения для класса элементов pac с серым цветом фона.

.pac-item {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}
.pac-item:hover {
    background-color: #ececec;
}

Давайте посмотрим на изменения, которые мы сделали.

Это выглядит лучше.

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

Чтобы изменить размер шрифта названия улицы, нам нужно использовать другой класс CSS с именем pac-item-query.

.pac-item-query {
    font-size: 16px;
}

Давайте попробуем еще раз, и это выглядит великолепно!

Если вы хотите узнать больше об API Карт Google, ознакомьтесь с моим курсом Vue JS 2 + API Карт Google: создание приложений на основе местоположения.

Это научит вас всему, что вам нужно знать, чтобы создавать приложения на основе местоположения, как PRO!

Вам также могут понравиться эти:

Vue.js + Places API: как добавить несколько полей ввода с автозаполнением

Изучите электронную книгу Vue JS и Google Maps API!

Создать приложение для определения местоположения

Курс Vue.js + Google Maps API для начинающих

Vue.js + Places API: создайте приложение для определения местоположения поблизости

Первоначально опубликовано на https://softauthor.com 25 мая 2020 г.