Изучите самый простой способ использования Google Maps в Angular
Карты Google соответствуют Angular. Наличие такого сильного сообщества разработчиков и использование его тысячами разработчиков по всему миру сделали Angular идеальным для включения большинства инструментов во фреймворк. перенос карт Google в Angular - одна из них, она решила многие проблемы для пользователей Angular. Вручную добавить карты Google в Angular очень сложно, поэтому некоторые люди взяли на себя задачу сделать добавление GMaps в свои приложения таким же простым, как импорт модуля.
В этом посте мы рассмотрим интеграцию Google Maps в ваше приложение Angular.
Предложение: сделайте свой Angular загрузчик карт Google многоразовым с помощью Bit. Используйте его в своих проектах, предлагайте обновления, синхронизируйте изменения и создавайте быстрее как один разработчик или как команда.
Узнайте больше о:
Библиотека AGM
Это основная библиотека, которую мы будем использовать. Основная библиотека в AGM - это библиотека @agm/core. @agm/core содержит решения для основного API JavaScript Карт Google.
Чтобы использовать это, мы сначала создадим проект Angular:
Приведенная выше команда создаст новый проект Angular.
Теперь мы устанавливаем библиотеку @agm/core:
Нам нужен компонент, в котором мы можем отображать карту, для этого мы формируем компонент:
Эта команда создаст map.component.ts в папке src/app/map/.
Нам нужно импортировать AgmModule в наш AppModule:
Смотрите, AgmModule импортирован и помещен в раздел импорта. Нам нужен ключ GMaps, чтобы получить его, перейдите на console.developers.google.com и следуйте инструкциям.
После успешного получения ключа вы можете вставить его сюда
Я добавил свой в environment.ts файл. Для простоты просто добавьте его в свойство apiKey выше.
Теперь мы закончили. Чтобы отобразить карту, мы открываем наш map.component.ts и вставляем это:
Это отобразит карту Google на нашем MapComponent.
Запускаем ng serve, мы увидим это в нашем браузере.
Тег выбора agm-map используется для отображения карт Google в наших компонентах. У него есть входы и выходы, которые мы увидим в следующих разделах.
Отображение выбранной широты и долготы 🌍
Приведенный выше код ничего не делает, просто отображает карту. Давайте заставим его отображать выбранное местоположение из заданной широты и долготы.
Помните, что широта и долгота - это то, что используется для определения местоположения на карте. Они триангулированы в плоскости x-y. Широта находится в плоскости x, а долгота - в плоскости y.
Итак, когда заданы широта и долгота, мы отслеживаем от оси x до оси y, пока они не встретятся. Пересечение - это местоположение / положение объекта или места.
Тип карты 🌍
У Google Maps есть варианты того, как мы хотим отображать карту.
Просмотр улиц: показывает улицы на уровне глаз, мы можем перемещаться по улицам с помощью кнопок со стрелками.
спутник: отображение усилителя со стороны спутника.
нормальный: карта по умолчанию показала нам Google.
Масштабирование 🔎
agm-map имеет возможность увеличивать или уменьшать масштаб карты. Для этого мы используем вход [zoom].
Мы устанавливаем глубину масштабирования на 5.
У этого есть уровни масштабирования:
- 1: Мир
- 5: Земля / континент
- 10: Город
- 15: Улицы
- 20: Здания
Если задать уровень масштабирования 0-4, будет показана карта всей Земли. 5-9 отобразит карту континента с более высоким разрешением, чем 0-5. При уровне масштабирования от 11 - 14 города на карте будут отображаться с более высоким разрешением, чем при предыдущем уровне масштабирования. 15-19 покажет улицы, а 20-~ покажет здания на уровне глаз.
Таким образом, наш приведенный выше пример покажет местоположение на карте на уровне суши / континента.
Размещение маркера 📌
Чтобы разместить индикатор / маркер📍 на карте, чтобы показать точное местоположение, мы будем использовать agm-marker. Маркеры похожи на булавки на карте.
Маркер / булавка появится в точном месте (-28.68352,-147.20785).
Добавление маркера 📌
В этом примере, когда пользователь щелкает карту, он добавляет на карту новый маркер. Мы держим маркеры в массиве, agm-marker проходит по массиву и помещает их на карту с помощью булавки / маркера. Когда мы щелкаем по карте, новый маркер помещается в массив markers. Булавка / маркер появится над местом, где щелкнули.
Выбор маркера
Перетаскивание маркера
Мы можем щелкнуть, удерживать и перетащить маркер.
Мы используем [markerDraggable]="true", чтобы сделать маркер перетаскиваемым. Затем у нас есть событие (dragEnd)="markerDragEnd(coords, $event)", это событие запускается, когда пользователь прекращает перетаскивать маркер.
Маркировка маркера
Мы можем пометить маркер, то есть прикрепить к маркеру имя или описание. Это будет имя, парящее над маркером, чтобы идентифицировать маркер.
Мы использовали вход [label], чтобы добавить метку к маркеру. Мы добавили свойство метки в интерфейс маркера, поэтому мы изменили наш код, чтобы включить новое дополнение. Наш первый маркер будет отображать Нью-Йорк поверх маркера, другие будут иметь дату создания поверх них.
Теперь было бы хорошо, если бы имена маркеров отображались на их головах вместо дат, когда они были созданы. Мы используем геокодирование.
Нам нужно установить googlemaps библиотеку:
Мы импортируем его в наш MapComponent и объявляем google var:
Затем наш код:
Метод getAddress использует переданные ему широту и долготу, чтобы получить адрес места. Видите ли, мы изменили метод addMarker, поэтому он вызывает метод getAddress для присвоения адреса маркера свойству label.
Мы создали объект geocoder, затем установили запрос GeoCoder с переданными lat и lng, наконец, мы вызвали метод geocode в geocoder, а в обратном вызове функции мы получили адрес местоположения.
Отображение нашей текущей позиции 🎌🌍
Давайте сделаем так, чтобы он отображал нашу текущую позицию:
Теперь мы настроили компонент для отображения нашей текущей позиции на карте при загрузке. Как мы это сделали? Все просто, мы использовали объект навигатора. У навигатора есть объект геолокации, который мы используем для вызова функции getCurrentPosition (), эта функция принимает обратный вызов функции, который она вызывает с объектом местоположения. Смотрите, что наша функция обратного вызова получит местоположение в параметре position.
Направление установки
Мы можем нанести маршруты на карту. Делаем это с помощью agm-direction.
Сначала устанавливаем его:
Далее импортируем модули:
Итак, теперь, чтобы построить направление от главного вокзала Тайбэя до пункта назначения в канцелярию президента Тайваня:
Расчет расстояния между точками
Мы можем рассчитать расстояние между точками на карте.
Чтобы рассчитать расстояние между главным железнодорожным вокзалом Тайбэя и местом назначения президента Тайваня, мы делаем следующее:
У нас есть метод calculateDistance, который вычисляет расстояние между двумя переданными ему точками. Мы конструируем объекты LatLng из двух точек и передаем их google.maps.geometry.spherical.computeDistanceBetween(...). Это возвращает расстояние между двумя точками.
Информационное окно рендеринга
Мы можем разместить информационное окно над маркером. Вот как мы это делаем:
Смотрите, он помещен внутри agm-маркера.
Рисование круга на карте
Чтобы нарисовать круг над местом, мы используем тег agm-circle.
Он имеет следующие входы:
«Широта»: широта местоположения.
«Долгота»: долгота местоположения.
«Кликабельно»: устанавливает кликабельность круга.
«Перетаскиваемый»: задает перетаскивание круга.
«Редактируемый»: устанавливает редактируемый круг.
«FillColor»: цвет круга.
«FillOpacity»: прозрачность круга.
«Radius»: радиус круга.
Рисование прямоугольника на карте
Мы используем agm-rectangle. Мы должны указать границы:
«Север»: северная граница.
«Восток»: восточная граница.
«Юг»: южная граница.
«Запад»: западная граница.
Заключение
Мы в значительной степени исчерпали возможности Google Maps на Angular. Об этом еще много. Множество входов и выходов в agm-circle, agm-rectangle, agm-info, agm-marker, agm-direction и agm-map. Это должно служить базовым руководством по Google Maps в Angular.
Напишите свои комментарии ниже, если я упустил момент или концепцию, орфографическую, грамматическую ошибку, короче вообще что-нибудь.
Спасибо!!!
