Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 - Complemento de geolocalización, API de Google Maps y Places

 A lo largo de este tutorial, aprenderá a usar la geolocalización y Google Maps en Ionic 5 / Angular.

En este tutorial vamos a crear una aplicación móvil de restaurantes cercanos usando Ionic 5 y Angular.

Vamos a aprender a utilizar:

  • El complemento Cordova Geolocation y su contenedor nativo Ionic 5 para obtener la posición actual del usuario o la ubicación GPS,

  • Google Maps para mostrar un mapa con un marcador que muestra la posición actual del usuario,

  • API de Google Places para obtener una lista de lugares o restaurantes cercanos en nuestro caso.

Además, echa un vistazo

Ionic 5: cree una aplicación de restaurantes cercanos con el complemento de geolocalización, Google Maps y la API de Places, parte 2

Generando un nuevo proyecto Ionic 5 / Angular

Comencemos generando un nuevo proyecto Ionic 5 basado en Angular usando Ionic CLI v4. Abra su terminal o símbolo del sistema y ejecute:

ionic start nearby-restaurants blank --type=angular 

Navegue dentro del directorio raíz de su proyecto y sirva su aplicación Ionic:

cd nearby-restaurants 
ionic serve 

Agregar una plataforma Android de destino

Dado que estamos creando una aplicación de Android, vamos a agregar un objetivo de Android, pero también puede agregar una plataforma ios o Windows:

ionic cordova platform add android 

A continuación, ejecute la aplicación en su dispositivo usando:

ionic run android -l 

Ahora simplemente continúe desarrollando su aplicación, todos los cambios se sincronizarán automáticamente en su dispositivo móvil gracias al -linterruptor.

Instalación y configuración del complemento de geolocalización de Cordova y su envoltorio nativo iónico

El complemento Cordova Geolocation le permite obtener la ubicación actual del usuario o la posición GPS, que es lo que necesitamos para poder obtener los restaurantes cercanos, así que agreguemos el complemento ejecutando:

ionic cordova plugin add cordova-plugin-geolocation --save 

Luego instale el contenedor 3.x + nativo de Ionic para este complemento a través de npm

npm install --save @ionic-native/geolocation 

A continuación tenemos que añadir un poco de configuración para que la cabeza de src/app/app.module.tsarchivo y comenzar con la importación Geolocationdesde ionic-nativey añadirlo a la lista de los principales proveedores de módulos:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Obtener la posición de usuario actual con el complemento Cordova de geolocalización

Dirígete al src/pages/home/home.tsarchivo y sigue estos pasos:

Para empezar, la importación GeolocationGeolocationOptionsGeopositionPositionError:

import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation'; 

A continuación, inyecte a Geolocationtravés del constructor del componente:

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

A continuación, agregue dos miembros para las opciones y la posición actual

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
options : GeolocationOptions;
currentPos : Geoposition;
constructor(public navCtrl: NavController,private geolocation : Geolocation) {} 

A continuación, agregue el getUserPosition()método:

getUserPosition(){
    this.options = {
        enableHighAccuracy : true
    };

    this.geolocation.getCurrentPosition(this.options).then((pos : Geoposition) => {

        this.currentPos = pos;      
        console.log(pos);

    },(err : PositionError)=>{
        console.log("error : " + err.message);
    });
}

Finalmente, llame al getUserPosition()cuando entre la vista:

ionViewDidEnter(){
    this.getUserPosition();
}    

Adición del SDK de JavaScript de Google Maps

Después de obtener la posición actual del usuario, necesitamos mostrar esa posición en un mapa de Google. Pero primero debemos configurar el SDK de JavaScript de Google Maps.

abra el src/index.htmlarchivo y agregue esta etiqueta de secuencia de comandos para incluir el SDK:

<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>

Para obtener una clave de API, vaya a este enlace

Después de obtener la clave API, péguela en lugar de YOUR_API_KEY_HEREen la etiqueta del script.

Luego agregue dos variables:

import { Component , ViewChild ,ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation'; 

declare var google;

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
options : GeolocationOptions;
currentPos : Geoposition;
@ViewChild('map') mapElement: ElementRef;
map: any;

Luego agregue este método para crear un mapa:

addMap(lat,long){

    let latLng = new google.maps.LatLng(lat, long);

    let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    this.addMarker();

}

A continuación, agregue el siguiente método para agregar un marcador:

addMarker(){

    let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter()
    });

    let content = "<p>This is your current position !</p>";          
    let infoWindow = new google.maps.InfoWindow({
    content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
    infoWindow.open(this.map, marker);
    });

}

Cambie su getCurrentPosition()método para mostrar el mapa según la posición actual del usuario:

getUserPosition(){
    this.options = {
    enableHighAccuracy : false
    };
    this.geolocation.getCurrentPosition(this.options).then((pos : Geoposition) => {

        this.currentPos = pos;     

        console.log(pos);
        this.addMap(pos.coords.latitude,pos.coords.longitude);

    },(err : PositionError)=>{
        console.log("error : " + err.message);
    ;
    })
}

A continuación, debe cambiar el src/pages/home/home.htmlarchivo:

<ion-header>
<ion-navbar>
    <ion-title>
    Nearby Me Restaurants
    </ion-title>
    <ion-buttons end>
    <button ion-button (click)="showNearbyResto()"><ion-icon name="list"></ion-icon>Restaurants</button>
    </ion-buttons>  

</ion-navbar>
</ion-header>

<ion-content padding>

<div #map id="map"></div> 

</ion-content>

El mapa no aparecerá, pero está ahí. Todo lo que necesita hacer es agregar algunos estilos al src/pages/home/home.scssarchivo:

page-home {
    .scroll {
        height: 100%
    }

    #map {
        width: 100%;
        height: 100%;
    }
}

Conclusión

Ese es el final de esta parte del tutorial. Hemos visto cómo obtener la posición actual del usuario utilizando el complemento Cordova Geolocation y cómo mostrar la posición actual del usuario en un mapa de Google en nuestra aplicación móvil Ionic 5 / Angular.

En la siguiente parte, continuaremos construyendo nuestra aplicación para mostrar una lista de ubicaciones cercanas (restaurantes) usando la API de ubicación de Google.

Publicar un comentario

0 Comentarios