Obtención de datos de ubicación con Ionic 4 y Capacitor

A continuación encontrará una demostración rápida sobre cómo obtener coordenadas GPS en su proyecto Ionic 4 usando Capacitor.

Si no has oído hablar de Capacitor, es el sustituto de Cordova del equipo de Ionic. Se centra en proporcionar funcionalidad nativa y complementos para aplicaciones web progresivas (PWA), iOS y Android. Es el futuro del desarrollo móvil híbrido.

Instalación

Comience creando su proyecto Ionic usando la CLI:

$ ionic start coordinates tabs --type=angular --capacitor$ cd coordinates

Condensador de configuración

A continuación, agregue Capacitor a nuestro proyecto Ionic recién creado e incluya el nombre y el ID de la aplicación (p. ej.: com.example.app). Usaremos npx para realizar esa tarea:

$ npx cap init coordinates com.example.app

Ejecute Ionic build para crear la carpeta www:

$ ionic build

Puedes agregar tus plataformas con:

$ npx cap add ios$ npx cap add android

Ahora, ejecuta ionic serve para compilar la aplicación en tu navegador:

$ ionic serve

Deberías ver los datos ficticios de las pestañas predeterminadas de Ionic. Abre tu proyecto en tu editor de texto preferido.

Abra tab1.page.html, elimine todo dentro de las ion-contentetiquetas y reemplácelo con el marcado a continuación:

ion-card  ion-card-header    ion-card-titleCoordinates/ion-card-title  /ion-card-header  ion-card-content    ion-itemLatitude: {{ latitude }}/ion-item    ion-itemLongitude: {{ longitude }}/ion-item  /ion-card-content/ion-card

Arriba hay una tarjeta Ionic rápida que imprime las coordenadas. En tu aplicación, probablemente quieras conectar estas coordenadas a otro complemento o servicio, como Google Maps, el clima, etc.

En el tab1.page.tsarchivo, importe el geolocationcomplemento desde @capcitor/core:

import { Geolocation} from '@capacitor/core';

Crea una variable para longitud y latitud con un tipo de número:

latitude: number;longitude: number;

En el constructor, llama a nuestra función que se creará próximamente this.getLocataion():

constructor() {  this.getLocation();}

Ahora, creemos esa getLocationfunción asíncrona y llamemos a la getCurrentPositionpromesa en la clase Geolocation que importamos:

async getLocation() {  const position = await Geolocation.getCurrentPosition();  this.latitude = position.coords.latitude;  this.longitude = position.coords.longitude;}

En el código, asignamos la latitud y la longitud a las variables que creamos anteriormente. La pantalla debería verse así:

¡Y eso es todo! ¡Es muy sencillo! Consulta la documentación oficial para obtener más información sobre otros métodos disponibles en la GeolocationAPI, como watchPositiony , addListenerasí como notas sobre permisos específicos para su uso con iOS y Android.