最近项目遇到移动web需要跳转不同的地图进行导航。因为本项目是基于mui+h5+开发的，本以为mui官网会有相应api，会很简单，岂料，真是一把血泪史。看mui官网也有不少人在这上面走弯路，我也再次记录之。
直接上代码：
以下代码涉及plus，是因为使用了mui相关。可自行替换，这里只做了高德和百度，腾讯暂未使用。
//选择高德或者百度、腾讯地图
function selectMap(dst, dstaddress, src) {
var btnArray = [{
title: "高德地图"
}, {
title: "百度地图"
}];
plus.nativeUI.actionSheet({
title: "请选择地图",
cancel: "取消",
buttons: btnArray
}, function(e) {
var index = e.index;
if(index === 1) {
//高德地图
openAmap(dst, dstaddress, src);
} else if(index === 2) {
//百度地图
openBmap(dst, dstaddress, src);
} else {
//腾讯地图
// openTmap(dst, dstaddress, src);
}
});
}
function openAmap(dst, dstaddress, src) {
//打开高德地图
//传pname和action是分别对应android和ios的判断
if(plus.runtime.isApplicationExist({
pname: 'com.autonavi.minimap',
action: 'iosamap://'
})) {
var url = "";
/***
* dev=1,此参数非常重要，因为传进来的是wgps-84（国际的没有国密的）的，而高德时国密的，所以要1，他自己进行加密
*/
if(plus.os.name == "Android") {
//android平台
url = "amapuri://route/plan/?sid=BGVIS1&slat=&slon=&sname=&did=BGVIS2&dlat=" + dst.latitude + "&dlon=" + dst.longitude + "&dname=" + dstaddress + "&dev=1&t=0"
} else if(plus.os.name == "iOS") {
//ios平台
url = "iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=&slon=&sname=&did=BGVIS2&dlat=" + dst.latitude + "&dlon=" + dst.longitude + "&dname=" + dstaddress + "&dev=1&t=0"
url = encodeURI(url);
} else {
//暂无
}
console.log(url)
plus.runtime.openURL(url)
} else {
mui.alert("高德地图未安装");
}
}
function openBmap(dst, dstaddress, src) {
//打开百度地图
if(plus.runtime.isApplicationExist({
pname: 'com.baidu.BaiduMap',
action: 'baidumap://'
})) {
var url = ""
if(plus.os.name == "Android") {
url = "bdapp://map/direction?origin=&destination=name:" + dstaddress + "|latlng:" + dst.latitude + "," + dst.longitude + "&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"
} else if(plus.os.name = "iOS") {
url = "baidumap://map/direction?origin=&destination=name:" + dstaddress + "|latlng:" + dst.latitude + "," + dst.longitude + "&coord_type=wgs84&mode=driving&src=ios.baidu.openAPIdemo"
url = encodeURI(url);
} else {
//暂无
}
plus.runtime.openURL(url)
} else {
mui.alert("百度地图未安装");
}
}
以上代码可直接使用，接下来详细说下百度和高德地图注意点
一、百度地图
有三种环境可调用的地图
1、web端（Web版百度地图面向PC&移动端浏览器的网站应用或移动APP应用，其中PC浏览器调起的百度地图地址为：http://map.baidu.com/ ；移动端调起的百度地图地址为：http://map.baidu.com/mobile/）
2、android端 (移动应用、浏览器端应用均可调起Android版百度地图)
3、ios端 (移动设备浏览器端应用和移动App应用均可调起iOS版百度地图。)
我的项目移动web需求是 调用原生地图app。也就是需要ios 和 android两端，所以这里要看2,3两点相关api
1. Android端
（android端）百度地图包名：com.baidu.BaiduMap
而需要打开地图的的scheme如下
使用H5+中的方法判断是否存在该app(其中的pname和action就不一一解释了，具体请查看官方api)
(plus.runtime.isApplicationExist({
pname: 'com.baidu.BaiduMap',
action: 'baidumap://'
}))
H5调用地图导航使用方式：
<a href="bdapp://map/direction?region=beijing&origin=39.98871,
116.43234&destination=西直门&coord_type=bd09ll&mode=driving&src=andr.baidu.openAPIdemo">驾车路线规划</a>
我这里mui中使用 plus.runtime.openURL(url)打开这个url，即可。
这里的需要的参数就不一一解释，百度地图开发官网都有
2.IOS端
ios端和android端的基本上一致，具体参数参考官网
调用：
<a href="baidumap://map/direction?origin=34.264642646862,108.95108518068&destination=40.007623,116.360582&coord_type=bd09ll&mode=driving&src=ios.baidu.openAPIdemo">路线规划</a>
调用ios端原生地图app的不同点在于url要进行一个编码。例如：
url = "baidumap://map/direction?origin=&destination=name:" + dstaddress + "|latlng:" + dst.latitude + "," + dst.longitude + "&coord_type=wgs84&mode=driving&src=ios.baidu.openAPIdemo"
url = encodeURI(url);
plus.runtime.openURL(url)
另外对于mui移动app。清单文件要加上scheme白名单
这里是百度高德以及腾讯地图的白名单
"urlschemewhitelist": [
"baidumap",
"iosamap",
"qqmap"
],
一、高德地图
其他的就不做赘述，参考百度地图，比如包，sheme等
包名：com.autonavi.minimap
sheme：iosamap
相关参数自行参考官网
使用高德地图的路线规划，不能选择导航相关，否则定位就会自动进行导航而不能进行选择，当然你如果需求就是如此，那就选择导航api相关
amapuri://route/plan/?sid=BGVIS1&slat=39.92848272&slon=116.39560823&sname=A&did=BGVIS2&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0
使用移动web调用的href 就是以上代码：
我项目掉调用：
url = "amapuri://route/plan/?sid=BGVIS1&slat=&slon=&sname=&did=BGVIS2&dlat=" + dst.latitude + "&dlon=" + dst.longitude + "&dname=" + dstaddress + "&dev=1&t=0"
plus.runtime.openURL(url)
ps：这里需要注意的就是dev（起终点是否偏移(0:lat 和 lon 是已经加密后的,不需要国测加密; 1:需要国测加密)）否则会导航位置差距过大，他需要接受的是如果你传入的是wgs84坐标系的经纬度，那么dev传1，如果传入的是gcj02坐标系的经纬度，那么就不用加密了，因为你传入的是经过加密的了，所以dev=0；
使用高德地图的路线规划，不能选择导航相关，否则定位就会自动进行导航而不能进行选择，当然你如果需求就是如此，那就选择导航api相关
移动web调用的href：
iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=39.92848272&slon=116.39560823&sname=A&did=BGVIS2&dlat=39.98848272&dlon=116.47560823&dname=B&dev=0&t=0
url = "baidumap://map/direction?origin=&destination=name:" + dstaddress + "|latlng:" + dst.latitude + "," + dst.longitude + "&coord_type=wgs84&mode=driving&src=ios.baidu.openAPIdemo"
url = encodeURI(url);
plus.runtime.openURL(url)
ios需要注意的点和高德一致，一样要进行encodeURI，再去调用打开app。