IOS和Android平台，移动web跳转百度、高德地图

最近项目遇到移动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("百度地图未安装");}
}

以上代码可直接使用，接下来详细说下百度和高德地图注意点

一、百度地图

(plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap',action: 'baidumap://'}))

驾车路线规划

我这里mui中使用 plus.runtime.openURL(url)打开这个url，即可。
这里的需要的参数就不一一解释，百度地图开发官网都有

2.IOS端
ios端和android端的基本上一致，具体参数参考官网
调用：

路线规划

调用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"],

一、高德地图

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

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)

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)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！