Интеграция Google Maps в Angular

12 апреля, 2021 11:54 дп 1 247 views | Комментариев нет

, | | Комментировать запись

Интеграция Google Maps в Angular

Google Maps – это популярный картографический сервис от Google, который поддерживает широкий спектр настроек конфигурации. Добавив Google Maps в свое приложение, вы сможете предоставить вашим пользователям больше контекстной информации, не только адрес или набор координат.

Angular Google Maps – это набор компонентов, которые предоставляют приложениям Angular инструменты поддержки API карт Google.

В этом руководстве вы научитесь использовать библиотеку @agm/core и создадите карту с отметкой на ней.

Требования

  • Локальная установка Node.js (следуя этим инструкциям для mac OS, Ubuntu, Debian, CentOS).
  • Вам может пригодиться базовое понимание процесса настройки проекта и компонентов Angular.
  • JavasScript API ключ для Google Maps. Для этого потребуется:
    • Создать учетную запись Google.
    • Войти в консоль Google Cloud Platform.
    • Создать новый проект.
    • Включить Google Maps JavasScript API для этого проекта.
    • И создать учетные данные для ключа API.

Примечание: Чтобы не получать сообщения «For development purposes only» при использовании API Google Карт, необходимо предоставить действующую кредитную карту и связать ее с платежной учетной записью вашего проекта Google Cloud Project. Но для выполнения данного мануала этого делать не нужно.

Это руководство было протестировано на версиях Node 14.13.1, npm 6.14.8, angular 10.1.5 и @agm/core 1.1.0.

1: Настройка проекта

Для создания нового проекта Angular можно использовать @angular/cli.

Введите в терминал следующую команду:

npx @angular/cli new angular-google-maps-example --style=css --routing=false --skip-tests

Она настроит новый проект Angular с заданными CSS-стилями (также можно использовать стили Sass, Less или Stylus) и без маршрутизации, а также пропустит все тесты.

Перейдите в только что созданный каталог проекта:

cd angular-google-maps-example

Здесь выполните следующую команду, которая установит @agm/core:

npm install @agm/core@1.1.0

Примечание: На сегодняшний день существует более современная версия 3.0.0-beta.0. Если вы хотите использовать эту версию, вам также следует установить @types/googlemaps.

Однако мы должны предупредить, что в ходе тестирования этого мануала с 3.0.0-beta.0 мы столкнулись с некоторыми проблемами. Чтобы исправить их, нам пришлось понизить версию до @types/googlemaps v3.39.12 и, в конечном итоге, до @agm/core (v1.1.0).

Откройте файл app.module.ts в редакторе кода и включите в нем поддержку библиотеки @agm/core:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AgmCoreModule.forRoot({

apiKey: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'

})
],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }

Обязательно замените YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE своим настоящим ключом API.

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

Теперь приложение поддерживает @agm/core. Пора создать пользовательский компонент для использования этой библиотеки.

2: Создание компонента карты

Итак, на данном этапе у нас есть всё, чтобы создать пользовательский компонент карты. Это делается так:

npx @angular/cli generate component MyAgmExample --flat=true --inlineStyle=true --inlineTemplate=true

Эта команда создаст новый компонент MyAgmExample в каталоге src/app, но без отдельного файла CSS или HTML. Она также добавит новый компонент в app.module.ts.

Далее откройте новый файл MyAgmExample.component.ts и отредактируйте его, чтобы настроить использование agm-map:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-agm-example',
template: `
<agm-map

[latitude]="lat"

[longitude]="lng"

[mapTypeId]="mapType"

>

</agm-map>
`,
styles: [
'agm-map { height: 300px; }'
] })
export class MyAgmExampleComponent implements OnInit {
lat = 21.3069;

lng = -157.8583;

mapType = 'satellite';
constructor() { }
ngOnInit(): void { }
}

Это создаст новую карту с типом satellite, широтой 21.3069 и долготой -157.8583 (latitude и longitude соответственно, в результате получим Гонолулу, Гавайи).

Примечание: Вы должны явно указать высоту элемента agm-map в CSS.

Затем отредактируйте app.component.html, чтобы приложение могло использовать наш новый компонент my-agm-example:

<my-agm-example></my-agm-example>

Затем запустите приложение, чтобы посмотреть, как всё работает на данный момент.

npm start

Открыв приложение в браузере, вы должны увидеть карту Google; это будет вид на Гонолулу со спутника.

3: Сборка продвинутой карты с метками и границами

Внутри шаблона компонента <agm-map> вы можете разместить ряд других компонентов. Кроме того, вы можете добавить новые параметры конфигурации. В этом руководстве мы поговорим только о добавлении на нашу карту простых геометрических форм. Конечно, вы можете самостоятельно ознакомиться с полной документацией, чтобы узнать обо всех доступных параметрах.

Внося в компонент <agm-map> значения широты и долготы, вы центрируете карту по этой конкретной координате. Однако вы можете разместить любое количество маркеров и фигур в любой части карты.

Откройте файл MyAgmExample.component.ts и включите поддержку agm-marker и agm-rectangle:

@Component({
selector: 'my-agm-example',
template: `
<agm-map
[latitude]="lat"
[longitude]="lng"
[zoom]="2"

(mapClick)="addMarker($event.coords.lat, $event.coords.lng)"

>

<agm-marker

*ngFor="let marker of markers"

[latitude]="marker.lat"

[longitude]="marker.lng"

[opacity]="marker.alpha"

[markerDraggable]="true"

(markerClick)="selectMarker($event)"

>

</agm-marker>

<agm-rectangle

[north]="max('lat')"

[east]="max('lng')"

[south]="min('lat')"

[west]="min('lng')"

>

</agm-rectangle>
</agm-map>
<p *ngIf="selectedMarker">

Lat: {{ selectedMarker.lat }} Lng: {{ selectedMarker.lng }}

</p>
`,
styles: [
'agm-map { height: 300px; }'
],
})
export class MyAgmAdvancedExample {
lat = 48.75606;
lng = -118.859;
selectedMarker = null;
markers = [
// These are all just random coordinates from https://www.random.org/geographic-coordinates/
{ lat: 22.33159, lng: 105.63233, alpha: 1 },

{ lat: 7.92658, lng: -12.05228, alpha: 1 },

{ lat: 48.75606, lng: -118.859, alpha: 1 },

{ lat: 5.19334, lng: -67.03352, alpha: 1 },

{ lat: 12.09407, lng: 26.31618, alpha: 1 },

{ lat: 47.92393, lng: 78.58339, alpha: 1 }

];

addMarker(lat: number, lng: number) {

this.markers.push({ lat, lng, alpha: 0.4 });

}

max(coordType: 'lat' | 'lng'): number {

return Math.max(...this.markers.map(marker => marker[coordType]));

}

min(coordType: 'lat' | 'lng'): number {

return Math.min(...this.markers.map(marker => marker[coordType]));

}

selectMarker(event) {

this.selectedMarker = {

lat: event.latitude,

lng: event.longitude

};

}
}

Прежде всего, мы установили на самой карте два дополнительных свойства: масштабирование (zoom) и обработчик событий mapClick. Параметр zoom показывает, в каком масштабе нужно отображать карту; здесь 0 – самый мелкий масштаб отображения, и он может увеличиться примерно до 22 (в зависимости от местоположения и типа карты). Обработчик mapClick генерирует событие всякий раз, когда пользователь кликает по карте. В нашем примере каждый новый клик пользователя по карте добавляет на нее новую метку.

Метки на карте напоминают булавки. У них есть следующие свойства:

  • latitude и longitude (обязательные параметры).
  • opacity меняет степень прозрачности метки.
  • markerDraggable позволяет пользователю удерживать метку и перетаскивать ее по карте.
  • markerClick позволяет обрабатывать события, которые возникают, когда пользователь кликает по меткам.

В этом мануале обработчик markerClick запускает addMarker, который ставит на карте новую булавку с другим уровнем непрозрачности.

В коде есть массив для хранения всех меток карты. Этот массив был заполнен парой случайных мест.

Кроме того, мы добавили на карту форму прямоугольника. Границы прямоугольника – север, юг, восток и запад – рассчитываются по крайним точкам широт и долгот всех меток. Основываясь на этом вычислении, прямоугольник будет перерисовываться по внешним координатам новой метки в том случае, если она появится за пределами текущего прямоугольника.

Есть и другие доступные функции, например, AgmPolygon, AgmCircle, AgmPolyLine. Кроме того, существует AgmDataLayer, который позволяет использовать GeoJSON для нанесения любой их этих функций на карту.

Важно! После выполнения мануала рекомендуем вам войти в свою консоль Google Cloud и на всякий случай удалить ключ API и связанную с ним учетную запись для выставления счетов.

Теперь у вас есть карта Google с метками и границами.

Заключение

В этом мануале вы узнали, как внедрить библиотеку @agm/core и Google Maps API в своем приложении Angular.

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

Если вы хотите узнать об Angular больше, обратитесь к этому разделу нашего Информатория.

Tags: , , ,

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