GoogleMaps使用離子本地方向的服務

Question

我正在使用googleMaps和我的ionic2應用程序。我正在使用離子本地lib.I迄今已經實施了很多業務，現在我正在嘗試使用Google路線服務找到兩點之間的路線。但我找不到任何樣本或我可以從哪裏開始。任何想法或樣本都完全讚賞。

Answer 1

Cordova尚未實施Directions-Service，因此在Ionic中不易使用。

下面是一個例子，如何使用它的另一種方式：

打開並編輯「的src/index.html」，則body標籤結束前添加此腳本引用。

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

我假設你知道如何從google API控制檯創建YOUR-API-KEY。

接下來，打開並編輯'src/pages/home/home.html'，然後用這行代碼替換'ion-content'內的所有標籤。

<ion-content> 
    <div id="floating-panel"> 
    <b>Start: </b> 
    <select [(ngModel)]="start" id="start" (change)="calculateAndDisplayRoute()"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
    </select><br> 
    <b>End: </b> 
    <select [(ngModel)]="end" id="end" (change)="calculateAndDisplayRoute()"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
    </select> 
    </div> 
    <div #map id="map"></div> 
</ion-content> 

打開並編輯'src/pages/home/home.ts'，然後用此代碼替換所有代碼。

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