Поиск на карте Google Maps в Angular

В данной статье я покажу вам как можно создать поиск на карте Google Maps в фреймворке Angular, с подсказками (автозаполнения).

Официальная документация полезная но в фреймворке Angular существует модуль Angular Google Maps (agm) который ещё больше облегчает работу с API карт.

Начало работы

Первое что нам нужно сделать это установить 2 пакета, используя Node Package Manager (npm):

Дальше, должны поменять декоратор @NgModule:

Что делает выше описанный код?

  1. Подключаем AgmCoreModule из пакета @agm/core module.
  2. В свойстве imports используем метод AgmCoreModule.forRoot() чтобы указать рабочую зону модуля.
  3. Так-же заметите что мы используем модуль ReactiveFormsModule для работы с формами в Angular.

Создаём шаблон

Для примера добавлю стили и html код в @Component, но для реального проекта рекомендую выделить в отдельный файл стили и html.

Объяснения:

  • Не забудьте задать высоту для карты. В данном случае я задал 300px.
  • Для данного примера я использовал Bootstrap CSS стили, чтобы шаблон выглядел адекватно.
  • Переменную связанную с input назвал search. Она объявлена в шаблоне при помощи символа решетка (#).
  • Мой input имеет одностороннюю привязку данных с FormControl к общедоступной (в контроллере) переменной searchControl.
  • Дальше я использую компонент agm-map передавая ему широту, долготу и zoom свойствами из моего контроллера, scrollwheel значением false.
  • Добавил маркер на карту agm-marker передавая ему позицию на карте.

Реализуем Controller

Дальше мы должны создать controller. Он выглядит примерно так:

Рекомендую

Если хотите изучить быстро Angular и чтоб объяснили простым языком сложные вещи, то рекомендую платный курс по Angular от WebForMySelf. А если ещё не знакомы с данным издательством, можете пройти бесплатный курс по Angular.

Demo

Оригинал на английском можно почитать тут.

Просмотры: 733
(1 оценок, среднее: 5,00 из 5)
Загрузка...

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

You have to agree to the comment policy.