H5 高德、百度、腾讯地图选择导航功能实现
高德
以下是基于
Javascript 的
H5 跳转
导航 app 封装方法：
1. 首先，需要判断当前设备的操作系统类型，可以通过以下代码
实现：
```
function getOsType() {
var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
return
'ios
';
} else if (/android/.test(ua)) {
return
'android
';
}
}
```
2. 判断操作系统类型后，根据不同的类型和
导航 app，使用不同的协议进行跳转。以下是常见的
导航 app 对应的协议：
-
百度地图：bdapp://map/direction?origin=latlng:当前位置|name:我的位置&destination=latlng:目的地纬度,目的地经度|name:目的地名称&mode=driving
-
高德地图：iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=当前位置纬度&sname=当前位置名称&slon=当前位置经度&saddr=当前位置&sinfo=我的位置&dlat=目的地纬度&dname=目的地名称&dlon=目的地经度&daddr=目的地
-
腾讯地图：qqmap://map/routeplan?type=drive&from=我的位置&fromcoord=当前位置纬度,当前位置经度&to=目的地名称&tocoord=目的地纬度,目的地经度&referer=应用名称
3. 综上所述，以下是完整的
H5 跳转
导航 app 封装方法：
```
function openNavigatio
nApp(lat, lng, name) {
var osType = getOsType();
if (osType ===
'ios
') {
if (navigator.userAgent.indexOf(
'baidumap
') > -1) {
window.location.href =
'bdapp://map/direction?origin=latlng:当前位置|name:我的位置&destination=latlng:
' + lat +
',
' + lng +
'|name:
' + name +
'&mode=driving
';
} else if (navigator.userAgent.indexOf(
'iosamap
') > -1) {
window.location.href =
'iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=当前位置纬度&sname=当前位置名称&slon=当前位置经度&saddr=当前位置&sinfo=我的位置&dlat=
' + lat +
'&dname=
' + name +
'&dlon=
' + lng +
'&daddr=目的地
';
} else if (navigator.userAgent.indexOf(
'qqmap
') > -1) {
window.location.href =
'qqmap://map/routeplan?type=drive&from=我的位置&fromcoord=当前位置纬度,当前位置经度&to=
' + name +
'&tocoord=
' + lat +
',
' + lng +
'&referer=应用名称
';
} else {
a
lert(
'请先安装
导航 app
');
}
} else if (osType ===
'android
') {
if (navigator.userAgent.indexOf(
'baidumap
') > -1) {
window.location.href =
'bdapp://map/direction?origin=我的位置&destination=name:
' + name +
'|latlng:
' + lat +
',
' + lng +
'&mode=driving
';
} else if (navigator.userAgent.indexOf(
'amap
') > -1) {
window.location.href =
'androidamap://route?sourceApplication=applicationName&slat=当前位置纬度&slon=当前位置经度&sname=当前位置名称&dlat=
' + lat +
'&dlon=
' + lng +
'&dname=
' + name +
'&dev=0&t=2
';
} else if (navigator.userAgent.indexOf(
'qqmap
') > -1) {
window.location.href =
'qqmap://map/routeplan?type=drive&from=我的位置&fromcoord=当前位置纬度,当前位置经度&to=
' + name +
'&tocoord=
' + lat +
',
' + lng +
'&referer=应用名称
';
} else {
a
lert(
'请先安装
导航 app
');
}
}
}
```
