Angular 13: Получить текущее местоположение, широту и долготу

В этом руководстве мы узнаем, как получить текущую широту и долготу местоположения на картах Google в Angular 13 с помощью основного пакета Google AGM. 

Как получить широту и долготу при нажатии на карту Google?

Используйте следующие шаги, чтобы интегрировать Карты Google в приложения Angular 13: 

Шаг 1 — Создайте приложение Angular

Выполните следующую команду в терминале, чтобы создать новое приложение angular: 

$ ng new angular-google-map-app

Затем перейдите в каталог приложения: 

$ cd angular-google-map-app

Шаг 2 – Установите AGM/Core Package

Затем выполните следующую команду в терминале, чтобы установить пакет библиотеки кода AGM, выполнив следующую команду npm:

$ npm install @agm/core@1 --save

Затем выполните следующую команду в терминале, чтобы установить тип для библиотеки карт Google. Итак, выполните также пакет типа npm ниже: 

$ npm install @types/googlemaps --save-dev

После этого откройте файл tsconfig.app.json и добавьте "googlemaps" в свойство массива типов: 

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "googlemaps"
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Шаг 3. Обновите модуль приложения с помощью модуля AgmCore.

Импортируйте AgmCoreModule, затем добавьте в массив импорта. После этого мы сможем использовать карты Google в нашем приложении Angular.

Google API Key: вам также необходимо указать ключ API Google в модуле приложения. Вам нужно посетить консоль Google, а затем создать ключ API.

Давайте откроем файл app.module.ts, а затем обновим его, как показано ниже:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AgmCoreModule } from '@agm/core';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'GOOGLE API KEY',
      libraries: ['places']
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 4 – Обновить класс компонента

Теперь определите переменную для хранения значений широты и долготы. Перейдите к файлу app.component.ts и обновите следующий код: 

//app.component.ts
 
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title: string = 'AGM project';
  latitude!: number;
  longitude!: number;
 
  @ViewChild('search')
  public searchElementRef!: ElementRef;
 
 
  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) { }
 
 
  ngOnInit() {
    //load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
    });
  }
 
  onMapClicked(event: any){
    console.table(event.coords);
    this.latitude = event.coords.lat;
    this.longitude = event.coords.lng;
  }
 
}

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

Шаг 5 – Обновите HTML-шаблон

Теперь откройте файл app.component.html и добавьте следующий HTML-шаблон: 

<!-- app.component.html -->
<div class="container">
 
  <h1>Angular Google Maps - Get Latitude and Longitude on Click</h1>
 
  <agm-map [latitude]="latitude" [longitude]="longitude" (mapClick)="onMapClicked($event)">
  </agm-map>
 
  <div>Latitude: {{latitude}}</div>
  <div>Longitude: {{longitude}}</div>
</div>

Событие (mapClick) вернет текущие координаты при нажатии на карту Google. 

Шаг 6 – Запустите приложение

Наконец, запустите приложение, введя следующую команду: 

$ ng serve --open

Это приложение будет доступно по следующему URL

http://localhost:4200