该文章讲述的是一个移动端小伙，通过js来调用高德地图APP和百度地图APP的故事。欢迎大家前来指教。小弟这厢有礼了。
1.话不多说先上效果图
本人的测试页面：
点击百度地图导航，打开百度地图APP：
点击高德地图导航，打开高德地图APP：
2.上代码
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>打开地图APP</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="../public/lib/mui_v3.7.2/css/mui.min.css"></head><body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">地图</h1> </header> <div class="mui-content" style="margin-top: 10px;"> <button onclick="baiduApp()">百度地图导航</button> <button onclick="gaodeApp()">高德地图导航</button> <div id="timeListion">listion</div> </div></body><script src="../public/lib/mui_v3.7.2/js/mui.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> function baiduApp() { let hasApp = true; const delay = 1000; const latCurrent = 32.025; const lngCurrent = 118.795; const urlObject = { lat: 32.025, lng: 118.795, city: '南京' } setTimeout(function () { if (hasApp) { // alert('跳转到百度地图APP'); } else { alert('未安装百度地图APP'); // 此处建议使用msg提示框，显示个两三秒自动消失。 } document.body.removeChild(iframeDom); }, 2000) const queryStr = `?origin=name:我的位置|latlng:${latCurrent},${lngCurrent}&destination=${urlObject.lat},${urlObject.lng}®ion=${urlObject.city}&coord_type=bd09ll&mode=driving`; const url = `baidumap://map/direction?${queryStr}&output=html`; const timeStart = Date.now(); const iframeDom = document.createElement("iframe"); iframeDom.setAttribute('src', url); iframeDom.setAttribute('style', 'display:none'); document.body.appendChild(iframeDom); setTimeout(function () { const timeEnd = Date.now(); const timeInterval = timeEnd - timeStart; document.getElementById('timeListion').innerHTML = '百度地图：' + timeInterval; // 由于js不能判断APP是否安装，所以此方法有待考究。 // 我的解决思路有些投机取巧，请大神路过不吝赐教。 if (!timeStart || timeEnd - timeStart < delay + 100) { hasApp = false; } }, delay); } function gaodeApp() { let hasApp = true; const delay = 1000; setTimeout(function () { if (hasApp) { // alert('跳转到百度地图APP'); } else { alert('未安装高德地图APP'); // 此处建议使用msg提示框，显示个两三秒自动消失。 } document.body.removeChild(iframeDom); }, 2000) const u = navigator.userAgent; const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 let url = ``; if (isAndroid) { url = `androidamap://navi?sourceApplication=appname&poiname=fangheng&lat=36.547901&lon=104.258354&dev=1&style=2`; } else if (isiOS) { 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`; } const timeStart = Date.now(); const iframeDom = document.createElement("iframe"); iframeDom.setAttribute('src', url); iframeDom.setAttribute('style', 'display:none'); document.body.appendChild(iframeDom); setTimeout(function () { const timeEnd = Date.now(); const timeInterval = timeEnd - timeStart; document.getElementById('timeListion').innerHTML = '高德地图：' + timeInterval; if (!timeStart || timeEnd - timeStart < delay + 100) { hasApp = false; } }, delay); } </script></html>3.参考文档：
高德地图API：lbs.amap.com/api/amap-mo…
百度地图API（ios）：lbsyun.baidu.com/index.php?t…
百度地图API（android）：lbsyun.baidu.com/index.php?t…
