6: Utilizar el GPS

Objetivo

Utilizar el GPS del dispositivo para obtener la ubicación actual.

Editar home.page.html

Abre src/app/home/home.page.html y agrega el siguiente contenido:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Acceso al GPS
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-button expand="full" (click)="getCurrentPosition()">Obtener Ubicación</ion-button>
  <div *ngIf="position">
    <p>Latitud: {{ position.coords.latitude }}</p>
    <p>Longitud: {{ position.coords.longitude }}</p>
  </div>
</ion-content>

Editar home.page.ts

Abre src/app/home/home.page.ts y agrega la siguiente lógica:

import { Component } from '@angular/core';
import { Geolocation } from '@capacitor/geolocation';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  position: GeolocationPosition | undefined;

  constructor() {}

  async getCurrentPosition() {
    this.position = await Geolocation.getCurrentPosition();
  }
}

Conceptos Básicos

El plugin de geolocalización de Capacitor permite acceder a la ubicación actual del dispositivo utilizando el GPS. La ubicación se puede obtener mediante el método getCurrentPosition.

Ejercicio

Implementa la funcionalidad para obtener la ubicación actual del dispositivo y mostrarla en la aplicación. Verifica que la latitud y la longitud se muestren correctamente después de obtener la ubicación.