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("百度地图未安装");
	}
}

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

一、百度地图

有三种环境可调用的地图
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

1、Android

相关参数自行参考官网
使用高德地图的路线规划，不能选择导航相关，否则定位就会自动进行导航而不能进行选择，当然你如果需求就是如此，那就选择导航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；

2,IOS
相关参数自行参考官网

使用高德地图的路线规划，不能选择导航相关，否则定位就会自动进行导航而不能进行选择，当然你如果需求就是如此，那就选择导航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。

原文地址：https://blog.csdn.net/u012733501/article/details/89639149