Автор оригинала: Saptak Sengupta.
Google Map является одним из наиболее широко используемых API Google в качестве большинства веб-сайтов, использующих карты Google для определения местоположения адреса. Для статического адреса это довольно просто. Все, что вам нужно сделать, это ввести адрес и карту покажет ближайшее местоположение. Проблема прибывает, когда адрес динамически выделяется пользователем. Предположим, что для события на сервере Event Organizer поступает в расположение. Основной компонент, используемый при проведении местоположения ввода, является автозаполнение Google. Но мы пошли еще дальше и проанализировали весь адрес на основе города, государства, страны и т. Д. И позволили пользователю также вводить детали, которые дали им ближайшее местоположение, отмеченное на карте, если автозаполнение не сможет найти адрес.
Автозаполнение местоположение
Как мы видим, в приведенном выше входном поле мы получаем предложения от Google Map при входе в первые несколько букв нашего адреса. Для этого нам нужны API Отказ Вы можете найти пример кода, как это сделать здесь Отказ
После этого сделано, то, что мы хотим, это не только включать этот адрес, но предоставить форму, чтобы заполнить весь адрес в случае отсутствия некоторых частей. Функция, которую автозаполняет слушает _ "Место \ _Changed" _ Отказ Поэтому, как только мы нажмем на один из вариантов, это событие срабатывает. Как только событие срабатывает, мы используем _autocomplete.getplace () _ Чтобы получить полный адрес JSON. JSON выглядит что-то подобное:
Теперь, что мы делаем, мы создаем форму с полями ввода, имеющих тот же идентификатор, что и те, которые мы требуем (например, страна, административные_AREA_LEVEL_1, местности и т. Д.). После этого мы выбираем «Long_Name или COLT_NAME] из этого JSON и поместите значение в соответствующем поле ввода с идентификаторами. Код для процесса после получения JSON разработан здесь Отказ
Редактирование адресной формы
После этого это выглядит что-то подобное:
Однако сейчас важная часть состоит в том, чтобы показать карту в соответствии с этими полями. Кроме того, каждый раз, когда мы обновляем поле, карта должна быть обновлена. Для этого мы используем взлом. Вместо того, чтобы полностью удалить начальное местоположение местоположения, мы скрываем поле, но сохраняйте привязку к AutoComplete Intact. В результате карта отображается, когда мы выбираем определенный адрес.
Теперь, когда мы обновляем поля в форме адреса, мы добавляем значение этого поля на значение в исходном поле местоположения. Хотя поле скрыто, оно все еще связано с автозаполнением. В результате, как только мы добавим что-то в строку, содержащуюся в поле, карта обновляется. Кроме того, обновленное значение хранится в БД. Таким образом, при каждом обновлении в поле указатель перемещается в ближайшее расположение, образованное, добавление всех данных из формы.
После сохранения данных местоположения в БД, если мы хотим редактировать его, мы можем вернуть JSON, сделав тот же запрос со значением местоположения. Это вернет одну и ту же форму адреса и карту соответственно.
Наконец, это выглядит что-то подобное:
Если вы хотите узнать больше о Google Maps API Вот некоторые связанные статьи:
Рисование карты Google с данными из API
Google Maps API или листовка
Пользовательская этикетка Infobox с Google Maps
Этот учебник изначально отправлен автором на Fossasia. Отказ Эта версия была отредактирована для ясности и может появиться отличаться от исходного поста.