Как вы можете воспроизвести отображение области расположения Airbnb с помощью геокодирования в Angular

1656555251 kak vy mozhete vosproizvesti otobrazhenie oblasti raspolozheniya airbnb s pomoshhyu

Филипп Джерга

1*kowBDo9y5hXO73JQUBu6AQ

Думали ли вы об интеграции Google Maps в свой проект? Знаете ли вы, как геокодировать местоположение? Это не так тяжело. Все, что нужно, это 20 минут, несколько строк кода и базовые знания программирования. Давайте посмотрим, как это делается.

Начнём с зависимостей и ключа API

Все, что нам нужно это установить Angular Google Maps (AGM). В Интернете существует множество пакетов, которые предоставляют вам готовые компоненты Карт Google. Какой из них вы выберете, зависит от ваших предпочтений. Я решился на AGM через его хорошо документированный API и широкий спектр компонентов.

Пора настроить наш ключ API. Без ключа API не весело с картой! Недавно Google придумал интересную идею. Чтобы настроить проект и получить ключ API, необходимо указать свою платежную информацию. Не беспокойтесь! Вам нужно добиться определенного количества запросов, чтобы получить плату за услугу.

Нам необходимо включить JavaScript API (25 000 бесплатных ежедневных запросов) и Geocoding API (2 500 бесплатных ежедневных запросов). Вы также можете установить свой ежедневный лимит, чтобы не превышать его.

Чтобы получить ключ API, выполните следующие действия.

  1. Выделите консоль разработчика Google.
  2. Создайте новый проект
  3. Выделите раздел библиотеки и включите Maps JavaScript API и API геокодирования
  4. Получите учетные данные (ключ API). А потом праздновать 🙂
1*gGuj7I_E5hXqt42Bi1sdYA
Давайте оставим это открытым на время. Нам нужен наш ключ API в Angular.

Начнём кодировать!

Разогрейте свои машины и откройте свои проекты в редакторах кода по вашему выбору, потому что сейчас все станет серьезным.

Давайте создадим модуль карты, чтобы у нас было все вместе. Нам требуется сервис для обработки всей логики и компонентов для отображения карты. Очень просто – просто введите в терминале: карта компонентов ng g. Вы также можете проверить мою структуру папок и компонентов карты в моем проекте GitHub.

Создайте в той же папке, что и папка компонента карты map.module.ts. Нам нужно импортировать AgmCoreModule и дайте ему ключ API, который мы получили от Google. Не забудьте ссылаться на свой MapModule в главном AppModule (или любом другом модуле, где вы хотите отобразить карту)!

Модуль AGM предоставит нам все необходимые компоненты и директивы для отображения карты Google. Он справится с нагрузкой API Карт Google, поэтому нам нужно сосредоточиться только на геокодировании места.

Нам нужна услуга

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

Давайте разберем его:

  1. Мы получаем геокодер из объекта окна, потому что я не нашел абстракцию в пакете AGM. Geocoder предоставляет функции, необходимые для геокодирования местоположения.
  2. Далее мы вернем Observable, потому почему бы и нет? Геокод является асинхронным, и лучший способ работы с асинхронным кодом в Angular, безусловно, наблюдается.
  3. Вызвать геокод с местоположением. Спустя время, когда функция решена, наша функция обратного вызова вызывается с результатом и статусом.
  4. Проверьте статус и есть ли в порядке мы готовы уходить. The Геокодирование прошло успешно, и мы можем получить координаты нашего расположения, вызвав функцию lat и lng для объекта геометрии.
  5. Если статус не в порядке, просто выдать ошибку и бросить слезу 🙁

Это должно быть для нашей службы. Это было не так тяжело, правда?

Перейдите к компоненту карты аренды

Давайте вернемся к нашему компоненту карты и заполним шаблон картой AGM.

Вот некоторый код, взятый из официальной документации AGM. Мы ссылаемся на компонент agm-map. На странице отобразится Карты Google, но не забудьте установить высоту agm-mapиначе он не будет отображаться! Выделите файл SCSS или CSS и напишите: agm-map {height: 400px}.

Чтобы отобразить местоположение на карте, нам нужно предоставить входные свойства широты и долготы для agm-круга (компонент, отображающий область круга местоположения на карте). Свойство zoom будет просто увеличивать карту, чтобы местоположение было более заметным. Вы можете видеть, что мы отражаем круг agm только тогда, когда у нас есть широта и долгота. Другие свойства, которые следует учитывать, это радиус окружности, цвета и непрозрачности.

Важнейшим на agm-map является mapReady eventEmitter. Эта функция будет выдавать событие, когда API Карт Google загружается и карта готова для отображения местоположения. Это лучшее время для того, чтобы позвонить в нашу службу карт и геокодировать местонахождение! Не будем терять время — создадим функцию mapReadyHandler в файле map component.ts.

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

Мы почти кончили. Теперь нам просто нужно установить широту и lng и вызвать детектирование изменений, чтобы убедиться, что наша карта будет обновлена ​​с отображаемой областью.

Последний кусок головоломки

Наш компонент карты окончен. Теперь нам нужно просто отразить его на экране. Вы можете выбрать родительский компонент по вашему выбору, где вы хотите отобразить свою карту. В моем случае я хотел показать карту места аренды. Смотрите код ниже:

Я ссылаюсь на свой компонент карты на странице информации об аренде и придание свойству вводу расположения внутри. К примеру, это может быть: Нью-Йорк, Мэйн-стрит. И вуаля! Карта с местоположением отображается, когда мы перейдем на страницу с деталями проката.

Резюме

Чтобы убедиться, что сейчас все ясно, давайте рассмотрим это в большей картине:

1*nC3brY6LKHObyEzKsLFuyA

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

Теперь вы знаете, как интегрировать Google Maps в приложение Angular. Это очень простая его версия. Если вас интересует что-то более сложное, вы можете посмотреть мой репозиторий проектов GitHub.

Для полной картины завершенного проекта вы можете увидеть мой курс на Udemy: The Complete Angular, React & Node | Приложение в стиле Airbnb.

Счастливого кодирования!

Филипп Джерга

Добавить комментарий

Ваш адрес email не будет опубликован.