Карты Google - одно из самых популярных и популярных приложений с более чем миллиардом пользователей в месяц. Начиная с Angular версии 9, он также доступен как компонент Angular.
На момент написания этой статьи документация официального репозитория @angular/google-maps была очень минималистичной. Причина в том, что @angular/google-maps - это просто Angular-оболочка официальных GoogleMaps. Чтобы реализовать функции, вам часто приходится обращаться к официальной документации Google Maps API.
Некоторых разработчиков, с которыми я разговаривал, это сбивало с толку. Некоторые из них чувствовали себя потерянными при реализации функции, использующей Google Maps в Angular.
В последнее время мне самому приходилось реализовывать функцию с помощью Google Maps. После успешной реализации своей функции я решил написать этот пост, чтобы облегчить вам жизнь.
О чем это?
В этом сообщении блога мы узнаем, как реализовать карту Google с полем поиска и автозаполнением адреса.
Итак, давайте на секунду поиграем в Product owner и сформулируем нашу функцию в виде истории:
Как пользователь я хочу иметь возможность искать город или адрес. Как только я выберу адрес, центр карты должен быть изменен на этот адрес.
Звучит отлично. Итак, мы собираемся создать поле ввода с некоторым автозаполнением адресов и картой Google под ним. Что ж, это может удовлетворить пользовательскую историю. Но держись! Есть еще один критерий приемлемости, исходящий от дизайнера в виде мокапа.
Поле поиска и соответствующее автозаполнение адреса должны быть размещены внутри карты.
Хорошо. Как мы это реализуем? Давайте посмотрим!
Карты и библиотеки Google
Чтобы использовать Google Maps API, первое, что нам нужно сделать, это создать новый ключ API.
После создания мы можем использовать этот ключ API в теге скрипта в нашем index.html для загрузки Google Maps.
<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY}></script>
Потрясающие. Этот скрипт загружает Google Maps API, но, к сожалению, для нашего случая использования одной карты недостаточно. Помните, нам также нужен адресный поиск.
Здесь в игру вступают библиотеки. Библиотеки содержат дополнительные API-интерфейсы, которые не загружаются вместе с картами. Разделение этих API-интерфейсов на библиотеки позволяет основному API-интерфейсу загружаться быстро.
Доступны следующие библиотеки:
- рисунок - предоставляет интерфейс, который позволяет пользователю рисовать на карте.
- геометрия - служебные функции для расчета расстояния или площади
- localContext - показывает ближайшие достопримечательности.
- места - позволяет вашему приложению искать места.
- визуализация - предоставляет тепловые карты для визуализации данных.
Большой. Для реализации адресного поиска нам понадобится библиотека мест. Чтобы загрузить API мест, нам нужно расширить тег скрипта в HTML с помощью параметра запроса libraries.
<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&libraries=places"></script>
☝️ Убедитесь, что ваш ключ API также включает библиотеку мест.
Большой! Мы загрузили карту и API-интерфейс Places - пора сосредоточиться на части Angular.
🐦 Подписывайтесь на меня в Twitter и будьте в курсе новых интересных вещей по разработке фронтенда!
Начало работы с @ angular / google-maps
Неудивительно, что сначала, конечно, мы должны установить библиотеку @angular/google-maps.
npm install @angular/google-mapsПосле установки мы можем импортировать GoogleMapsModule.
☝️ Обычно вы добавляете это в свой функциональный модуль с отложенной загрузкой. Ради этого поста вполне нормально добавить его в
AppModule.
Теперь мы готовы использовать директиву google-map в нашем HTML.
Если мы сейчас запустим наш сервер разработки, мы увидим, что на нашей странице отображается базовая карта.
Эта карта в настоящее время использует некоторые настройки по умолчанию для отображения элементов управления. Конечно, карту можно настраивать. Давайте воспользуемся некоторыми параметрами настройки, чтобы настроить карту.
С опцией center мы сначала центрируем карту в прекрасном месте в Швейцарии, месте, где я вырос 😉
Если у вас когда-нибудь будет возможность посетить Швейцарию, я настоятельно рекомендую вам посетить этот регион. Он великолепен для пеших прогулок и катания на беговых лыжах. Хватит маркетинга, давайте сосредоточимся на кодировании.
options дает нам точный контроль над картой и ее элементами управления. В нашем случае мы хотим показать только полноэкранный режим и элемент управления масштабированием. Поэтому мы отключаем пользовательский интерфейс по умолчанию. Кроме того, мы используем свойство width, чтобы наша карта занимала всю ширину родительского контейнера.
Прохладный. Мы отобразили и настроили базовую карту. Теперь сконцентрируемся на адресном поиске.
Добавление окна поиска
По своей сути, поле поиска адреса представляет собой классический элемент ввода HTML с некоторым CSS. Функция поиска добавляется после того, как мы соединяем элемент ввода с окном поиска мест Google.
Для начала мы создаем собственный элемент Input поверх компонента google-map. Кроме того, мы добавляем в него ссылку на шаблон (#mapSearchField) и класс CSS.
Очевидно, что класс CSS используется для стилизации ввода в соответствии с нашими пожеланиями. Ссылка на шаблон, тем не менее, позволяет нам получить элемент ввода внутри TypeScript.
Мы используем Angulars @ViewChild для запроса входного элемента и карты.
☝️ Поскольку карта является угловым компонентом, мы можем запросить ее по имени класса компонента вместо использования ссылки на шаблон.
Отлично, мы получили поле поиска и карту. Пришло время подключить их. Что может быть лучше, чем сделать это с помощью крючка жизненного цикла ngAfterViewInit?
Мы создаем новый экземпляр поля поиска и передаем собственный элемент нашего поля поиска в качестве параметра конструктора. Этот вызов автоматически связывает наше поле ввода с SearchBox.
Далее мы размещаем наше поле поиска на карте. Карта Google предоставляет ControlPosition перечисление для выделенных точек на карте. Мы хотим отображать наше поле поиска в TOP_CENTER.
Вот это да. У нас есть карта с окном поиска и предложениями адресов. Но мы еще не закончили.
Если на этом этапе мы выберем адрес, карта не изменит местоположение. Ну да, в этом есть смысл. Это еще не реализовано. 😉
Реагировать на внесение изменений
Поле поиска выдает places_changed событие, которое срабатывает, как только мы выбираем новое место.
В нашем обратном вызове мы получаем доступ к местам, возвращаемым searchBox. Мы выполняем некоторые проверки, а затем используем геометрию места для создания новых границ и обновления центра карты.
Вот и все. Мы успешно создали простую карту с адресным поиском.
Если описанные выше действия запутались, вот полный код компонента:
Если вам понравилась моя работа и эта запись в блоге, мы будем очень признательны, если вы поддержите мою работу в виде аплодисментов или звездочек. Кроме того, не стесняйтесь поделиться этим сообщением, чтобы больше людей могли извлечь из него пользу.
