Ionic2调用高德地图,定位与导航
关于插件下载、插件安装、获取key、封装插件详情请参考http://www.jianshu.com/p/85aceaee3b35
下面主要说说我运用的过程(个人理解,有误的地方欢迎小伙伴指出随时修正)
要完成的效果如下
待勘察页面点击地址——转到搜索地点页面——再到定位页面——再到导航页面
![](https://img.haomeiwen.com/i5786620/1754e6009986b983.png)
![](https://img.haomeiwen.com/i5786620/028c1c0a46c44395.png)
![](https://img.haomeiwen.com/i5786620/85d6b06ac0126860.png)
![](https://img.haomeiwen.com/i5786620/08f6859c3d38a7c5.png)
过程浅谈:
在勘察页面ts文件里把地址传过去。
![](https://img.haomeiwen.com/i5786620/f037d3cbfb2154d8.png)
在搜索地址页面ts文件里get地址,并且初始化地址查询插件。进入页面时返回地址列表。
![](https://img.haomeiwen.com/i5786620/3c396eece01f5506.png)
![](https://img.haomeiwen.com/i5786620/b887769f4ee8f19c.png)
点击地址列表项时跳转到地址定位页面locationPage,并把地址信息item传过去
![](https://img.haomeiwen.com/i5786620/1254374b3de5267b.png)
![](https://img.haomeiwen.com/i5786620/8ca1c247da380ff6.png)
在地址定位页面location.ts,获取传过来的地址信息
![](https://img.haomeiwen.com/i5786620/42003005d84d60a4.png)
页面初始化时加载地图,然后定位。
![](https://img.haomeiwen.com/i5786620/c6f6900afb94609d.png)
![](https://img.haomeiwen.com/i5786620/c069a5b84b0b6624.png)
![](https://img.haomeiwen.com/i5786620/00799a0408ae390b.png)
点击页面里的“去哪里按钮”,跳转到导航页面,并且把导航方式和目标地址信息传过去。
![](https://img.haomeiwen.com/i5786620/428ee82fdaf64ef5.png)
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
![](https://img.haomeiwen.com/i5786620/79ee89bea61d32e3.png)
进入导航页面时根据导航方式,起始和目标地址信息进行导航。
![](https://img.haomeiwen.com/i5786620/a5193228a106150c.png)
![](https://img.haomeiwen.com/i5786620/f617238ad11314e8.png)
注意:定位和导航方法封装在nativeService.ts
![](https://img.haomeiwen.com/i5786620/1ec7b2c750bd54b0.png)
![](https://img.haomeiwen.com/i5786620/60bbb234fbdea080.png)