Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 / Angular: complemento de geolocalización, API de Google Maps y Places [Parte 2]

 En la parte anterior, agregamos un mapa de Google a nuestra aplicación Ionic 5 y usamos el complemento Cordova Geolocation y su contenedor nativo Ionic para obtener la posición actual del usuario.

Mira la primera parte:

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

En esta parte, vamos a seguir construyendo nuestra aplicación móvil de restaurantes cercanos, así que comencemos.

En primer lugar, debe cambiar la etiqueta de secuencia de comandos para incluir el SDK de JavaScript de Google Maps en el src/index.htmlarchivo para habilitar la API de Places:

<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

A continuación, abra el src/pages/home/home.scssarchivo y agregue estos estilos:

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

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

El mapa de Google ocupará solo el 40% de la altura.

A continuación, abra el src/pages/home/home.htmlarchivo y cámbielo en consecuencia:

<ion-header>
<ion-navbar>
    <ion-title>
    Nearby Me Restaurants
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

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

<div style="width : 100% ;height: 60%">
    <ion-list>
    <ion-item *ngFor="let place of places">
        <p></p>
    </ion-item>
    </ion-list>
</div>

</ion-content>

Ahora, en el src/pages/home/home.tsarchivo, agregue un miembro de variables de tipo Arraypara contener los lugares cercanos:

declare var google;

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
options : GeolocationOptions;
currentPos : Geoposition;
places : Array<any> ; 

A continuación, agregue un getRestaurants()método para obtener la lista de los restaurantes cercanos:

getRestaurants(latLng)
{
    var service = new google.maps.places.PlacesService(this.map);
    let request = {
        location : latLng,
        radius : 8047 ,
        types: ["restaurant"]
    };
    return new Promise((resolve,reject)=>{
        service.nearbySearch(request,function(results,status){
            if(status === google.maps.places.PlacesServiceStatus.OK)
            {
                resolve(results);    
            }else
            {
                reject(status);
            }

        }); 
    });

}

Este método devuelve una Promesa que se resuelve con la lista de restaurantes o si hay un error será rechazada con el código de estado.

Hemos envuelto el service.nearbySearch()método, que usa devoluciones de llamada, en una promesa para jugar bien con la detección de cambios angulares.

También agregue un createMarker()método:

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

Este método crea un marcador a partir de un lugar. Se llama para cada lugar devuelto por el nearbySearch()método.

Finalmente actualice el addMap()método para invocar los métodos anteriores:

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.getRestaurants(latLng).then((results : Array<any>)=>{
        this.places = results;
        for(let i = 0 ;i < results.length ; i++)
        {
            this.createMarker(results[i]);
        }
    },(status)=>console.log(status));

    this.addMarker();

}

La placesvariable contiene la lista de los restaurantes cercanos que luego se muestran usando <ion-list>en la vista.

Conclusión

¡Eso es! Ahora ha creado una aplicación cercana con Ionic 5 / Angular que obtiene la ubicación actual del usuario utilizando el complemento Cordova Geolocation e Ionic Native luego usa la API de Google Places para buscar los restaurantes cercanos y mostrarlos en un mapa de Google.

Publicar un comentario

0 Comentarios