gpt4 book ai didi

google-maps - 使用 ionic-native 的 Google Maps 方向服务

转载 作者:行者123 更新时间:2023-12-04 18:22:38 25 4
gpt4 key购买 nike

我将 googleMaps 与我的 ionic2 应用程序一起使用。我正在使用 ionic-native lib。到目前为止,我已经实现了很多业务,现在我正在尝试使用谷歌方向服务找到两点之间的路线。但我找不到任何样本或我可以从哪里开始。任何想法或 sample 都非常感谢。

最佳答案

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

关于google-maps - 使用 ionic-native 的 Google Maps 方向服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42670382/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com