Morioh
Login
Iñigo Martínez

Iñigo Martínez

1 year ago

Cómo obtener la latitud y longitud de la ubicación actual en Angular

En este tutorial, aprenderá cómo obtener la latitud y la longitud de la ubicación actual en los mapas de Google Angular 14 utilizando el paquete principal de Google AGM.

Utilice los siguientes pasos para integrar Google Maps en las aplicaciones de Angular 14; como sigue:

  • Paso 1: crear una aplicación Angular
  • Paso 2: Instale el paquete AGM/Core
  • Paso 3: actualice el módulo de la aplicación con el módulo AgmCore
  • Paso 4: Actualizar clase de componente
  • Paso 5: actualice la plantilla HTML
  • Paso 6: Ejecutar la aplicación

Paso 1: crear una aplicación Angular

Ejecute el siguiente comando en la terminal para crear una nueva aplicación angular ejecutando el siguiente comando:

$ ng new angular-google-map-app

Luego, muévete dentro del directorio de la aplicación:

$ cd angular-google-map-app

Paso 2: Instale el paquete AGM/Core

Luego ejecute el siguiente comando en la terminal para instalar el paquete de la biblioteca de códigos AGM ejecutando el siguiente comando npm:

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

Luego ejecute el siguiente comando en la terminal para instalar el tipo para la biblioteca de Google Maps. Por lo tanto, ejecute el paquete de tipo npm debajo también:

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

A partir de entonces, abra el   archivo  tsconfig.app.json"googlemaps" , luego agregue la  propiedad debajo de la matriz de tipos:

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

Paso 3: actualice el módulo de la aplicación con el módulo AgmCore

Importe AgmCoreModule y luego agréguelo a la matriz de importaciones. Después de eso, podremos usar los mapas de Google en nuestra aplicación Angular.

Clave API de Google : también debe especificar la clave API de Google en el módulo de la aplicación. Debe visitar  Google Console y luego crear la clave API.

Abramos el  archivo app.module.ts  y actualícelo como se muestra a continuación:

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 { }

Paso 4: Actualizar clase de componente

Ahora, defina la variable para mantener los valores de latitud y longitud. Dirígete al archivo app.component.ts y actualiza el siguiente código:

//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;
  }
 
}

Arriba, el  onMapClicked evento se activará al hacer clic en el mapa en cualquier área para devolver el Objeto con latitud, longitud y otra información.

Paso 5: actualice la plantilla HTML

Ahora abra el  archivo app.component.html  y agregue la siguiente plantilla 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>Copy

El  (mapClick) evento devolverá las coordenadas actuales al hacer clic en el mapa de Google.

Paso 6: Ejecutar la aplicación

Finalmente, ejecute la aplicación presionando el siguiente comando:

$ ng serve --open

Será la aplicación en la siguiente URL

http://localhost:4200

¡Feliz codificación!

2.75 GEEK