Cómo usar los plugins geolocation y launchnavigator en Ionic 3

Para algunos de nosotros, el plugin de geolocalización puede ser muy útil. Con él, podemos obtener la ubicación del usuario y usarla para diferentes propósitos en nuestros proyectos. En este caso, obtendremos la ubicación del usuario, la almacenaremos junto con algunas variables y luego usaremos esas variables para enviarlas como parámetros al complemento del navegador de lanzamiento y ejecutaremos la aplicación Google Maps (si está disponible) para mostrar la ruta del usuario ubicación a una ubicación específica con ayuda de Ionic 3.

Comencemos:

1. Primero hay que instalarlo ejecutando este comando:

$ ionic cordova plugin add cordova-plugin-geolocation

$ npm install --save @ ionic-native / geolocation

2. Luego tenemos que declararlo en nuestro archivo app.module.ts

import { Geolocation } from '@ionic-native/geolocation';

providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler} ]

3. También debemos declararlo en el componente en el que vamos a usar este complemento

import { Geolocation } from '@ionic-native/geolocation';

constructor(public navCtrl: NavController, public geolocation: Geolocation) {}

4. Ahora que hemos declarado nuestro complemento, podemos comenzar a usarlo, y es muy fácil de usar.

import { NavController} from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

@Component({
  selector: 'page-geolocation',
  templateUrl: 'geolocation.html'
})

export class GeolocationPage {
	latitude:number ;
  	longitude:number ;
constructor(public navCtrl: NavController, public geolocation: Geolocation, 
private launchNavigator:LaunchNavigator) {}
ionViewDidLoad(){
	this.geolocation.getCurrentPosition().then(position =>{
      	this.latitude = position.coords.latitude;
      	this.longitude = position.coords.longitude;
    },error=>{
        console.log('error',error);
    });
}
}

¿Qué estamos haciendo con esto?

Estamos declarando dos variables numéricas (latitud y longitud) para almacenar la latitud y la longitud del usuario, le estamos preguntando a Ionic si se carga la vista con la función ionViewDidLoad, y en caso de que se cargue, si se ejecuta el código dentro de la función. Aquí estamos usamos el método de geolocalización getCurrentPosition () que nos proporcionará las coordenadas (coords) o la marca de tiempo de la ubicación del usuario. Así que estamos obteniendo la latitud y la longitud de las coordenadas.

Ahora veamos cómo podemos usar estas coordenadas para abrir los mapas de Google que muestran la ubicación del usuario y la distancia a un establecimiento en particular usando otro complemento de Cordova llamado launchNavigator.

5. Necesitamos instalar el complemento launchNavigator con estos comandos.

$ ionic cordova plugin add uk.co.worykingedge.phonegap.plugin.launchnavigator

$ npm install --save @ionic-native/launch-navigator

6. Y como hicimos con el plugin de geolocalización, tenemos que declararlo en nuestro archivo app.module.ts y en nuestro constructor.

import { Geolocation } from '@ionic-native/geolocation';
import { LaunchNavigator } from '@ionic-native/launch-navigator';

providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    LaunchNavigator,
    {provide: ErrorHandler, useClass: IonicErrorHandler} ]

7. También tenemos que declararlo en nuestro componente.

import { LaunchNavigator, LaunchNavigatorOptions } from 
'@ionic-native/launch-navigator';

constructor(public navCtrl: NavController, public geolocation: Geolocation,
private launchNavigator:LaunchNavigator) {}

8. Estamos listos, así que vamos a hacerlo.

navigateLocation(){
 	let options: LaunchNavigatorOptions = {
		app: this.launchNavigator.APP.GOOGLE_MAPS,
             start:[this.latitude,this.longitude]
			};
	this.launchNavigator.navigate('London, ON',options)
	.then(success =>{
		console.log(success);
	},error=>{
		console.log(error);
	})
}

Creamos una función llamada navigateLocation, en la que hacemos uso de nuestro complemento launchNavigator. En esta función estamos declarando las opciones de launchNavigator que son “app” (el nombre de la aplicación que estamos lanzando, en este caso, Google Maps) y “start” (las coordenadas del usuario que obtuvimos con el plugin de geolocalización).

Digamos que queremos navegar a Londres, entonces llamamos al método de navegación y enviamos el destino, en este caso, Londres, y las opciones de launchNavigator. Por último llamamos al método y luego consolamos el mensaje de éxito y error

9. Al final tu componente debería verse así:

import { NavController} from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { LaunchNavigator, LaunchNavigatorOptions } from 
'@ionic-native/launch-navigator';

@Component({
  selector: 'page-geolocation',
  templateUrl: 'geolocation.html'
})

export class GeolocationPage {
	latitude:number ;
  	longitude:number ;
constructor(public navCtrl: NavController, public geolocation: Geolocation, 
private launchNavigator:LaunchNavigator) {}
ionViewDidLoad(){
	this.geolocation.getCurrentPosition().then(position =>{
      	this.latitude = position.coords.latitude;
      	this.longitude = position.coords.longitude;
    },error=>{
        console.log('error',error);
    });
}
navigateLocation(){
	let options: LaunchNavigatorOptions = {
		start:[this.latitude,this.longitude],
		app: this.launchNavigator.APP.GOOGLE_MAPS
	};
	this.launchNavigator.navigate('London, ON', options)
	.then(success =>{
		console.log(success);
	},error=>{
		console.log(error);
	})
}
}

10. Ahora, para que podamos usar esto debemos tener un botón que llame a este método.

>ion-header>
  <ion-navbar>
    <ion-title>
    	Geolocation
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
	Navigate google maps
</ion-content>

Al final, tendrás algo como esto