如何在Ionic 3上使用本地谷歌地图显示路线

Question

我正在Ionic 3中构建一个项目，我正在使用Ionic的本地地图插件，我可以显示地图，并可以在选定的地址中添加标记，但我没有在地图上显示推荐的路线。

HTML:

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

TS:

loadMap(){
var lat = this.placeInfo.latitudeFrom;
var lng = this.placeInfo.longitudeFrom;
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: lat,
lng: lng,
gestureHandling: 'none',
zoomControl: true
},
zoom: 18,
tilt: 30,
}
};
this.map = GoogleMaps.create('map', mapOptions);
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
let marker: Marker = this.map.addMarkerSync({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: lat,
lng:lng
}
});
})
.catch(error =>{
console.log('error: ', error);
});

}

我正在尝试这个，但不起作用

displayRoutev2() {
this.directionsService.route({
origin: this.placeInfo.startPoint,
destination: this.placeInfo.endPoint,
travelMode: 'DRIVING'
}, (response, status) => {
if (status === 'OK') {
this.directionsDisplay.setDirections(response);
this.directionsDisplay.setMap(this.map);
} else {
window.alert('No se encontraron rutas disponibles.' + status);
}
});
var service = new google.maps.DistanceMatrixService();

}

我可以使用var"service"来调用任何函数吗？或者我需要尝试另一种方式？

我可以用另一种不是更好的方式来显示路线，我需要使用这种原生的方式，有人知道我能做什么？

Answer 1

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
declare var google;
@Component({
selector: 'app-direction',
templateUrl: './direction.page.html',
styleUrls: ['./direction.page.scss'],
})
export class DirectionPage implements OnInit, AfterViewInit {
@ViewChild('mapElement') mapNativeElement: ElementRef;
@ViewChild('directionsPanel') directionsPanel: ElementRef;
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer;
directionForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createDirectionForm();
}
ngOnInit() {
}
createDirectionForm() {
this.directionForm = this.fb.group({
source: ['', Validators.required],
destination: ['', Validators.required]
});
}
ngAfterViewInit(): void {
const map = new google.maps.Map(this.mapNativeElement.nativeElement, {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
this.directionsDisplay.setMap(map);
directionsDisplay.setPanel(this.directionsPanel.nativeElement);
}
DisplayRoute(formValues) {
const that = this;
this.directionsService.route({
origin: formValues.source,
destination: formValues.destination,
travelMode: 'DRIVING'
}, (response, status) => {
if (status === 'OK') {
that.directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}
==In home.page.ts==
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Direction</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form [formGroup]="directionForm" (ngSubmit)="DisplayRoute(directionForm.value)">
<ion-item>
<ion-label position="floating">Source</ion-label>
<ion-input formControlName="source"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Destination</ion-label>
<ion-input formControlName="destination"></ion-input>
</ion-item>
<ion-button expand="full" type="submit" [disabled]="directionForm.invalid">Get Direction</ion-button>
</form>
<ion-card>
<ion-card-content>
<div #directionsPanel></div>
</ion-card-content>
</ion-card>
<div #mapElement class="map"></div>
</ion-content>