Cordova 如何在本机谷歌地图上以英里和公里为单位显示两个标记之间的距离？（科尔多瓦，爱奥尼亚3号）

如何在爱奥尼亚原生谷歌地图上以英里和公里为单位显示两个标记之间的距离？ 我想用h3标签在地图右上方显示数字

有没有办法显示估计行程时间？我需要估计步行和开车的时间

任何示例代码都将不胜感激

---

谢谢，

我使用谷歌地图方向服务API来显示两地之间的距离

首先，使用以下方法安装Google地图库：

npm install @types/googlemaps --save-dev

现在转到node_modules，然后是@types，并在Google maps文件夹中添加以下行：

declare module 'googlemaps';

现在我们将使用GoogleMapsJavaScript库了解这些地方。因此，请在index.html文件中包含Google Maps js文件：

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

现在要导入app.module.ts文件中的地理位置插件：

import { Geolocation } from '@ionic-native/geolocation';      
@NgModule({    
     ...   
     providers: [  Geolocation   ]  
     ... })

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

import { googlemaps } from 'googlemaps';

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

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


export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  @ViewChild('directionsPanel') directionsPanel: ElementRef;

  map:any;
  latLng:any;
  markers:any;
  mapOptions:any;

  startService:any;
  autocompleteStart:any;

  endService:any;
  autocompleteEnd:any;

  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;
  start:any;
  end:any;
  travelType:any = 'DRIVING';

  //distance and duration
  distance:any='';
  duration:any='';

  constructor(private geolocation : Geolocation) { }

  ionViewDidLoad() {
    this.loadMap();
    this.startService = new google.maps.places.AutocompleteService();        
    this.autocompleteStart = [];
    this.endService = new google.maps.places.AutocompleteService();        
    this.autocompleteEnd = [];      
    this.start = '';
    this.end = '';
  }

  loadMap(){

    this.geolocation.getCurrentPosition().then((position) => {

      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      console.log('latLng',this.latLng);

      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }   

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

    }, (err) => {
      alert('err '+err);
    });

  }

/*-----------------------Search Direction--------------------*/

  startSearch() {

    if (this.start == '') {
      this.autocompleteStart = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.start, 
      componentRestrictions: {  } 
    }

    this.startService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteStart = [];            
      predictions.forEach(function (prediction) {              
      self.autocompleteStart.push(prediction);
      });
    });

  }

  endSearch() {

    if (this.end == '') {
      this.autocompleteEnd = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.end, 
      componentRestrictions: {  } 
    }

    this.endService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteEnd = [];            
      predictions.forEach(function (prediction) {              
        self.autocompleteEnd.push(prediction);
      });
    });
  }

  chooseStart(item){
    console.log('item',item);
    this.start = item.description; 
    this.autocompleteStart = [];
  }

  chooseEnd(item){
    console.log('item',item);
    this.end = item.description;
    this.autocompleteEnd = [];
  }

/*--------------------Get Direction beteen to places-----------------------*/

  getDirections(){

    this.directionsDisplay.setMap(this.map);
    this.directionsDisplay.setPanel(this.directionsPanel.nativeElement);

    this.directionsService.route({
      origin : this.start,
      destination : this.end,
      waypoints: this.wayPoints,
      optimizeWaypoints: true,
      travelMode : this.travelType,
      provideRouteAlternatives: true,
    }, (response, status) => {
        if (status == google.maps.DirectionsStatus.OK) {
         this.directionsDisplay.setDirections(response);
          // Create a new DirectionsRenderer for each route
        for (var i = 0; i < response.routes.length; i++) {
            var dr = new google.maps.DirectionsRenderer();
            dr.setDirections(response);
            // Tell the DirectionsRenderer which route to display
            dr.setRouteIndex(i);
            dr.setMap(this.map);

            // Code ommited to display distance and duration
           let x = i+1;
            // Display the distance:
             this.distance += x +') '+ response.routes[i].legs[0].distance.text +', ' ;
             console.log('distance',this.distance);
            // Display the duration:
            this.duration += x +') '+ response.routes[i].legs[0].duration.text +', ' ;
            console.log('duration',this.duration);
        }

       // this.directionsDisplay.setDirections(response);
        console.log('response:-',response);
      } else {
        alert('Directions request failed due to ' + status);
      }
    });
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<!--====================== For Get Direction ==========================-->

<form align="center">

    <ion-searchbar 
    [(ngModel)]="start" 
    name="start"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="startSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Starting Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteStart" (click)="chooseStart(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>


    <ion-searchbar 
    [(ngModel)]="end" 
    name="end"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="endSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Ending Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteEnd" (click)="chooseEnd(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>

    <button ion-button round (click)="getDirections()">GO</button>

</form>

<br>
  <div *ngIf="distance && duration">
    <b>Distance :- {{distance}}</b><br>
    <b>Duration :- {{duration}}</b>
  </div>

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

    <ion-card>
        <ion-card-content>
            <div #directionsPanel></div>
        </ion-card-content>
    </ion-card>

</ion-content>

然后将Google maps类和地理位置插件导入home.ts文件：

import { Geolocation } from '@ionic-native/geolocation';      
@NgModule({    
     ...   
     providers: [  Geolocation   ]  
     ... })

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

import { googlemaps } from 'googlemaps';

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

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


export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  @ViewChild('directionsPanel') directionsPanel: ElementRef;

  map:any;
  latLng:any;
  markers:any;
  mapOptions:any;

  startService:any;
  autocompleteStart:any;

  endService:any;
  autocompleteEnd:any;

  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;
  start:any;
  end:any;
  travelType:any = 'DRIVING';

  //distance and duration
  distance:any='';
  duration:any='';

  constructor(private geolocation : Geolocation) { }

  ionViewDidLoad() {
    this.loadMap();
    this.startService = new google.maps.places.AutocompleteService();        
    this.autocompleteStart = [];
    this.endService = new google.maps.places.AutocompleteService();        
    this.autocompleteEnd = [];      
    this.start = '';
    this.end = '';
  }

  loadMap(){

    this.geolocation.getCurrentPosition().then((position) => {

      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      console.log('latLng',this.latLng);

      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }   

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

    }, (err) => {
      alert('err '+err);
    });

  }

/*-----------------------Search Direction--------------------*/

  startSearch() {

    if (this.start == '') {
      this.autocompleteStart = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.start, 
      componentRestrictions: {  } 
    }

    this.startService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteStart = [];            
      predictions.forEach(function (prediction) {              
      self.autocompleteStart.push(prediction);
      });
    });

  }

  endSearch() {

    if (this.end == '') {
      this.autocompleteEnd = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.end, 
      componentRestrictions: {  } 
    }

    this.endService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteEnd = [];            
      predictions.forEach(function (prediction) {              
        self.autocompleteEnd.push(prediction);
      });
    });
  }

  chooseStart(item){
    console.log('item',item);
    this.start = item.description; 
    this.autocompleteStart = [];
  }

  chooseEnd(item){
    console.log('item',item);
    this.end = item.description;
    this.autocompleteEnd = [];
  }

/*--------------------Get Direction beteen to places-----------------------*/

  getDirections(){

    this.directionsDisplay.setMap(this.map);
    this.directionsDisplay.setPanel(this.directionsPanel.nativeElement);

    this.directionsService.route({
      origin : this.start,
      destination : this.end,
      waypoints: this.wayPoints,
      optimizeWaypoints: true,
      travelMode : this.travelType,
      provideRouteAlternatives: true,
    }, (response, status) => {
        if (status == google.maps.DirectionsStatus.OK) {
         this.directionsDisplay.setDirections(response);
          // Create a new DirectionsRenderer for each route
        for (var i = 0; i < response.routes.length; i++) {
            var dr = new google.maps.DirectionsRenderer();
            dr.setDirections(response);
            // Tell the DirectionsRenderer which route to display
            dr.setRouteIndex(i);
            dr.setMap(this.map);

            // Code ommited to display distance and duration
           let x = i+1;
            // Display the distance:
             this.distance += x +') '+ response.routes[i].legs[0].distance.text +', ' ;
             console.log('distance',this.distance);
            // Display the duration:
            this.duration += x +') '+ response.routes[i].legs[0].duration.text +', ' ;
            console.log('duration',this.duration);
        }

       // this.directionsDisplay.setDirections(response);
        console.log('response:-',response);
      } else {
        alert('Directions request failed due to ' + status);
      }
    });
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<!--====================== For Get Direction ==========================-->

<form align="center">

    <ion-searchbar 
    [(ngModel)]="start" 
    name="start"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="startSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Starting Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteStart" (click)="chooseStart(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>


    <ion-searchbar 
    [(ngModel)]="end" 
    name="end"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="endSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Ending Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteEnd" (click)="chooseEnd(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>

    <button ion-button round (click)="getDirections()">GO</button>

</form>

<br>
  <div *ngIf="distance && duration">
    <b>Distance :- {{distance}}</b><br>
    <b>Duration :- {{duration}}</b>
  </div>

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

    <ion-card>
        <ion-card-content>
            <div #directionsPanel></div>
        </ion-card-content>
    </ion-card>

</ion-content>

现在将以下代码添加到您的home.ts文件中：

import { Geolocation } from '@ionic-native/geolocation';      
@NgModule({    
     ...   
     providers: [  Geolocation   ]  
     ... })

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

import { googlemaps } from 'googlemaps';

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

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


export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  @ViewChild('directionsPanel') directionsPanel: ElementRef;

  map:any;
  latLng:any;
  markers:any;
  mapOptions:any;

  startService:any;
  autocompleteStart:any;

  endService:any;
  autocompleteEnd:any;

  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;
  start:any;
  end:any;
  travelType:any = 'DRIVING';

  //distance and duration
  distance:any='';
  duration:any='';

  constructor(private geolocation : Geolocation) { }

  ionViewDidLoad() {
    this.loadMap();
    this.startService = new google.maps.places.AutocompleteService();        
    this.autocompleteStart = [];
    this.endService = new google.maps.places.AutocompleteService();        
    this.autocompleteEnd = [];      
    this.start = '';
    this.end = '';
  }

  loadMap(){

    this.geolocation.getCurrentPosition().then((position) => {

      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      console.log('latLng',this.latLng);

      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }   

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

    }, (err) => {
      alert('err '+err);
    });

  }

/*-----------------------Search Direction--------------------*/

  startSearch() {

    if (this.start == '') {
      this.autocompleteStart = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.start, 
      componentRestrictions: {  } 
    }

    this.startService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteStart = [];            
      predictions.forEach(function (prediction) {              
      self.autocompleteStart.push(prediction);
      });
    });

  }

  endSearch() {

    if (this.end == '') {
      this.autocompleteEnd = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.end, 
      componentRestrictions: {  } 
    }

    this.endService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteEnd = [];            
      predictions.forEach(function (prediction) {              
        self.autocompleteEnd.push(prediction);
      });
    });
  }

  chooseStart(item){
    console.log('item',item);
    this.start = item.description; 
    this.autocompleteStart = [];
  }

  chooseEnd(item){
    console.log('item',item);
    this.end = item.description;
    this.autocompleteEnd = [];
  }

/*--------------------Get Direction beteen to places-----------------------*/

  getDirections(){

    this.directionsDisplay.setMap(this.map);
    this.directionsDisplay.setPanel(this.directionsPanel.nativeElement);

    this.directionsService.route({
      origin : this.start,
      destination : this.end,
      waypoints: this.wayPoints,
      optimizeWaypoints: true,
      travelMode : this.travelType,
      provideRouteAlternatives: true,
    }, (response, status) => {
        if (status == google.maps.DirectionsStatus.OK) {
         this.directionsDisplay.setDirections(response);
          // Create a new DirectionsRenderer for each route
        for (var i = 0; i < response.routes.length; i++) {
            var dr = new google.maps.DirectionsRenderer();
            dr.setDirections(response);
            // Tell the DirectionsRenderer which route to display
            dr.setRouteIndex(i);
            dr.setMap(this.map);

            // Code ommited to display distance and duration
           let x = i+1;
            // Display the distance:
             this.distance += x +') '+ response.routes[i].legs[0].distance.text +', ' ;
             console.log('distance',this.distance);
            // Display the duration:
            this.duration += x +') '+ response.routes[i].legs[0].duration.text +', ' ;
            console.log('duration',this.duration);
        }

       // this.directionsDisplay.setDirections(response);
        console.log('response:-',response);
      } else {
        alert('Directions request failed due to ' + status);
      }
    });
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<!--====================== For Get Direction ==========================-->

<form align="center">

    <ion-searchbar 
    [(ngModel)]="start" 
    name="start"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="startSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Starting Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteStart" (click)="chooseStart(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>


    <ion-searchbar 
    [(ngModel)]="end" 
    name="end"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="endSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Ending Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteEnd" (click)="chooseEnd(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>

    <button ion-button round (click)="getDirections()">GO</button>

</form>

<br>
  <div *ngIf="distance && duration">
    <b>Distance :- {{distance}}</b><br>
    <b>Duration :- {{duration}}</b>
  </div>

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

    <ion-card>
        <ion-card-content>
            <div #directionsPanel></div>
        </ion-card-content>
    </ion-card>

</ion-content>

从'@angular/core'导入{Component，ElementRef，ViewChild}；
从“离子角度”导入{NavController，Platform}；
从'@ionic native/Geolocation'导入{Geolocation，GeolocationOptions，Geolocation，PositionError}；
从“谷歌地图”导入{googlemaps}；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
@ViewChild（'map'）mapElement:ElementRef；
@ViewChild（'directionsPanel'）directionsPanel:ElementRef；
地图：任何；
latLng：任何；
标记：任何；
地图选项：任何；
startService：任何；
自动完成测试：任何；
终端服务：任何；
自动完成：任何；
directionsService=新的google.maps.directionsService；
directionsDisplay=新建google.maps.DirectionsRenderer；
开始：任何；
结束：任何；
travelType:any=‘DRIVING’；
//距离和持续时间
距离：任意=“”；
持续时间：任意=“”；
构造函数（私有地理位置：地理位置）{}
ionViewDidLoad（）{
这个.loadMap（）；
this.startService=new google.maps.places.AutocompleteService（）；
this.autocompleteStart=[]；
this.endService=new google.maps.places.AutocompleteService（）；
this.autocompleteEnd=[]；
this.start=''；
this.end=''；
}
loadMap（）{
this.geolocation.getCurrentPosition（）。然后（（位置）=>{
this.latLng=新的google.maps.latLng（position.coords.latitude，position.coords.longitude）；
console.log（'latLng'，this.latLng）；
this.mapOptions={
中心：这个，拉丁，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
}   
this.map=new google.maps.map（this.mapement.nativeElement，this.mapOptions）；
}，（错误）=>{
警报（“错误”+错误）；
});
}
/*-----------------------搜索方向--------------------*/
startSearch（）{
如果（this.start==''）{
this.autocompleteStart=[]；
返回；
}
让自我=这个；
设config={
输入：this.start，
组件限制：{}
}
this.startService.getPlacePredictions（配置、函数（预测、状态）{
console.log（'modal>getPlacePredictions>status>'，status）；
self.autocompleteStart=[]；
forEach（函数（预测）{
self.autocompleteStart.push（预测）；
});
});
}
endSearch（）{
如果（this.end==''）{
this.autocompleteEnd=[]；
返回；
}
让自我=这个；
设config={
输入：this.end，
组件限制：{}
}
this.endService.getPlacePredictions（配置、函数（预测、状态）{
console.log（'modal>getPlacePredictions>status>'，status）；
self.autocompleteEnd=[]；
forEach（函数（预测）{
自动完成推送（预测）；
});
});
}
选择开始（项目）{
console.log（'item'，item）；
this.start=item.description；
this.autocompleteStart=[]；
}
选择结束（项目）{
console.log（'item'，item）；
this.end=item.description；
this.autocompleteEnd=[]；
}
/*--------------------在两个地方之间找到方向-----------------------*/
getDirections（）{
this.directionsDisplay.setMap（this.map）；
this.directionsDisplay.setPanel（this.directionsPanel.nativeElement）；
此路径为.DirectionService.route({
来源：这个。开始，
目的地：本月底，
航路点：这个，航路点，
航路点：对，
travelMode:this.travelType，
ProviderRouteAlternatives:正确，
}，（响应、状态）=>{
if（status==google.maps.directionstatus.OK）{
this.directions显示.setDirections（响应）；
//为每个管线创建新的DirectionsRenderer
对于（var i=0；i

现在将以下代码添加到您的home.html文件中：

import { Geolocation } from '@ionic-native/geolocation';      
@NgModule({    
     ...   
     providers: [  Geolocation   ]  
     ... })

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

import { googlemaps } from 'googlemaps';

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

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


export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  @ViewChild('directionsPanel') directionsPanel: ElementRef;

  map:any;
  latLng:any;
  markers:any;
  mapOptions:any;

  startService:any;
  autocompleteStart:any;

  endService:any;
  autocompleteEnd:any;

  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;
  start:any;
  end:any;
  travelType:any = 'DRIVING';

  //distance and duration
  distance:any='';
  duration:any='';

  constructor(private geolocation : Geolocation) { }

  ionViewDidLoad() {
    this.loadMap();
    this.startService = new google.maps.places.AutocompleteService();        
    this.autocompleteStart = [];
    this.endService = new google.maps.places.AutocompleteService();        
    this.autocompleteEnd = [];      
    this.start = '';
    this.end = '';
  }

  loadMap(){

    this.geolocation.getCurrentPosition().then((position) => {

      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      console.log('latLng',this.latLng);

      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }   

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

    }, (err) => {
      alert('err '+err);
    });

  }

/*-----------------------Search Direction--------------------*/

  startSearch() {

    if (this.start == '') {
      this.autocompleteStart = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.start, 
      componentRestrictions: {  } 
    }

    this.startService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteStart = [];            
      predictions.forEach(function (prediction) {              
      self.autocompleteStart.push(prediction);
      });
    });

  }

  endSearch() {

    if (this.end == '') {
      this.autocompleteEnd = [];
      return;
    }

    let self = this; 

    let config = { 
      input: this.end, 
      componentRestrictions: {  } 
    }

    this.endService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteEnd = [];            
      predictions.forEach(function (prediction) {              
        self.autocompleteEnd.push(prediction);
      });
    });
  }

  chooseStart(item){
    console.log('item',item);
    this.start = item.description; 
    this.autocompleteStart = [];
  }

  chooseEnd(item){
    console.log('item',item);
    this.end = item.description;
    this.autocompleteEnd = [];
  }

/*--------------------Get Direction beteen to places-----------------------*/

  getDirections(){

    this.directionsDisplay.setMap(this.map);
    this.directionsDisplay.setPanel(this.directionsPanel.nativeElement);

    this.directionsService.route({
      origin : this.start,
      destination : this.end,
      waypoints: this.wayPoints,
      optimizeWaypoints: true,
      travelMode : this.travelType,
      provideRouteAlternatives: true,
    }, (response, status) => {
        if (status == google.maps.DirectionsStatus.OK) {
         this.directionsDisplay.setDirections(response);
          // Create a new DirectionsRenderer for each route
        for (var i = 0; i < response.routes.length; i++) {
            var dr = new google.maps.DirectionsRenderer();
            dr.setDirections(response);
            // Tell the DirectionsRenderer which route to display
            dr.setRouteIndex(i);
            dr.setMap(this.map);

            // Code ommited to display distance and duration
           let x = i+1;
            // Display the distance:
             this.distance += x +') '+ response.routes[i].legs[0].distance.text +', ' ;
             console.log('distance',this.distance);
            // Display the duration:
            this.duration += x +') '+ response.routes[i].legs[0].duration.text +', ' ;
            console.log('duration',this.duration);
        }

       // this.directionsDisplay.setDirections(response);
        console.log('response:-',response);
      } else {
        alert('Directions request failed due to ' + status);
      }
    });
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<!--====================== For Get Direction ==========================-->

<form align="center">

    <ion-searchbar 
    [(ngModel)]="start" 
    name="start"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="startSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Starting Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteStart" (click)="chooseStart(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>


    <ion-searchbar 
    [(ngModel)]="end" 
    name="end"
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="endSearch()" 
    (ionCancel)="dismiss()"
    placeholder="Ending Places">
    </ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let item of autocompleteEnd" (click)="chooseEnd(item)">
            {{ item.description }}
        </ion-item>
    </ion-list>

    <button ion-button round (click)="getDirections()">GO</button>

</form>

<br>
  <div *ngIf="distance && duration">
    <b>Distance :- {{distance}}</b><br>
    <b>Duration :- {{duration}}</b>
  </div>

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

    <ion-card>
        <ion-card-content>
            <div #directionsPanel></div>
        </ion-card-content>
    </ion-card>

</ion-content>

离子图
{{item.description}}