GoogleMaps Wegbeschreibungen Dienst mit ionischen nativen

Question

Ich verwende googleMaps mit meiner ionic2 App. Ich benutze ionischen-native lib. Ich habe viel von dem Geschäft bisher implementiert und jetzt versuche ich, die Route zwischen zwei Punkten mit Google Routenplaner Service zu finden. Aber ich kann keine Probe finden oder wo ich anfangen könnte. Irgendwelche Ideen oder Probe wird völlig geschätzt.

Answer 1

Cordova hat den Directions-Service noch nicht implementiert, daher ist er nicht für die einfache Verwendung in Ionic verfügbar.

Hier ist ein Beispiel, wie es in anderer Art und Weise zu nutzen:

öffnen und bearbeiten ‚src/index.html‘ dann vor dem Schließen des Body-Tages diese Skript Referenz hinzufügen.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> 

Ich nehme an, dass Sie wissen, wie Sie YOUR-API-KEY von der Google API-Konsole erstellen.

Als nächstes öffnen und bearbeiten 'src/pages/home/home.html' ersetzen Sie dann alle Tags innerhalb 'ion-content' mit diesen Zeilen der Tags.

Öffnen und bearbeiten Sie 'src/pages/home/home.ts' und ersetzen Sie dann alle Codes durch diese Codes.

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { IonicPage } from 'ionic-angular'; 
import { NavController } from 'ionic-angular'; 

declare var google; 

@IonicPage() 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    @ViewChild('map') mapElement: ElementRef; 
    map: any; 
    start = 'chicago, il'; 
    end = 'chicago, il'; 
    directionsService = new google.maps.DirectionsService; 
    directionsDisplay = new google.maps.DirectionsRenderer; 

    constructor(public navCtrl: NavController) { 

    } 

    ionViewDidLoad(){ 
    this.initMap(); 
    } 

    initMap() { 
    this.map = new google.maps.Map(this.mapElement.nativeElement, { 
     zoom: 7, 
     center: {lat: 41.85, lng: -87.65} 
    }); 

    this.directionsDisplay.setMap(this.map); 
    } 

    calculateAndDisplayRoute() { 
    this.directionsService.route({ 
     origin: this.start, 
     destination: this.end, 
     travelMode: 'DRIVING' 
    }, (response, status) => { 
     if (status === 'OK') { 
     this.directionsDisplay.setDirections(response); 
     } else { 
     window.alert('Directions request failed due to ' + status); 
     } 
    }); 
    } 

} 

Reference Link