Ionic2调用高德地图,定位与导航

关于插件下载、插件安装、获取key、封装插件详情请参考http://www.jianshu.com/p/85aceaee3b35

下面主要说说我运用的过程(个人理解,有误的地方欢迎小伙伴指出随时修正)

要完成的效果如下

待勘察页面点击地址——转到搜索地点页面——再到定位页面——再到导航页面


Ionic2调用高德地图,定位与导航_第1张图片
Ionic2调用高德地图,定位与导航_第2张图片
Ionic2调用高德地图,定位与导航_第3张图片
Ionic2调用高德地图,定位与导航_第4张图片

过程浅谈:

在勘察页面ts文件里把地址传过去。

在搜索地址页面ts文件里get地址,并且初始化地址查询插件。进入页面时返回地址列表。


Ionic2调用高德地图,定位与导航_第5张图片
Ionic2调用高德地图,定位与导航_第6张图片

点击地址列表项时跳转到地址定位页面locationPage,并把地址信息item传过去


Ionic2调用高德地图,定位与导航_第7张图片
Ionic2调用高德地图,定位与导航_第8张图片

在地址定位页面location.ts,获取传过来的地址信息


Ionic2调用高德地图,定位与导航_第9张图片

页面初始化时加载地图,然后定位。


Ionic2调用高德地图,定位与导航_第10张图片
Ionic2调用高德地图,定位与导航_第11张图片
Ionic2调用高德地图,定位与导航_第12张图片

点击页面里的“去哪里按钮”,跳转到导航页面,并且把导航方式和目标地址信息传过去。


mapNavigation(navigationType) { //1驾车,2公交,3步行

let markerData = this.marker.getExtData(); //desPosition()方法里把地址信息item赋给了this.marker.extData

if(!markerData||!markerData.location){

this.nativeService.showToast('请先搜索要去的地点');

return;

}

let modal = this.modalCtrl.create(NavigationModalPage, {'navigationType': navigationType, 'markerLocation': {'lng': markerData.location.lng, 'lat': markerData.location.lat}});

modal.present();

}

在导航页面,首先获取导航方式(1驾车,2公交,3步行)navigationType和目标地址信息markerLocation


Ionic2调用高德地图,定位与导航_第13张图片

进入导航页面时根据导航方式,起始和目标地址信息进行导航。


Ionic2调用高德地图,定位与导航_第14张图片
Ionic2调用高德地图,定位与导航_第15张图片

注意:定位和导航方法封装在nativeService.ts


Ionic2调用高德地图,定位与导航_第16张图片
Ionic2调用高德地图,定位与导航_第17张图片

你可能感兴趣的:(Ionic2调用高德地图,定位与导航)