我正在使用googleMaps和我的ionic2应用程序。我正在使用离子本地lib.I迄今已经实施了很多业务,现在我正在尝试使用Google路线服务找到两点之间的路线。但我找不到任何样本或我可以从哪里开始。任何想法或样本都完全赞赏。GoogleMaps使用离子本地方向的服务
4
A
回答
2
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);
}
});
}
}
+0
为什么downvotes? – rubenlop
+0
您可以使用本机进行无限制的API调用,但JS每天仅允许2500次 –
相关问题
- 1. 离子服务始终使用本地主机
- 2. 如何使API调用从一个本地服务器离子到另一个表达本地服务器
- 3. 离子的信息窗口的GoogleMaps
- 4. 离子服务在本地主机上,而不是服务器的IP
- 5. 广东话呼叫服务方法(使用离子)
- 6. 离子2 googlemaps自定义控件
- 7. 反向地理在Subgurim的GoogleMaps
- 8. 本地的Nexus服务器 - 镜子
- 9. 离子2从服务
- 10. 推送服务离子2
- 11. 运行时, “离子服务”
- 12. 离子2翻译服务
- 13. 在谷歌地图API中使用方向服务
- 14. 使用appcelerator向本地服务器发送http请求
- 15. 离子 - 本地对话框
- 16. 离子本地存储
- 17. 离子卡向x轴方向滚动
- 18. 将本地osrm服务器添加到mapbox gl方向
- 19. 获取离子框架中的方向谷歌地图
- 20. 使用本地SMTP服务器从Azure发送电子邮件
- 21. 错误的离子在离子棱角components.core.scss服务
- 22. 离子服务中离子储存的价值没有得到
- 23. 使用PHP设置本地服务器
- 24. Docker swarm使用本地服务实例
- 25. 离子2中的离子本地问题
- 26. 在离子应用程序中分离服务不起作用
- 27. 调用Google地图方向时未捕获的异常服务
- 28. 数据服务和离子的问题
- 29. 本地存储在离子版本3
- 30. 离子应用可工作在“离子服务”,并在离子视图,但不能与“离子构建IOS”
你找到一个合适的解决方案? – f0rza