移動端調用高德地圖APP和百度地圖APP

時間 2019-11-16

標籤移動調用地圖 app 百度欄目無線简体版

原文原文鏈接

該文章講述的是一個移動端小夥，經過js來調用高德地圖APP和百度地圖APP的故事。歡迎你們前來指教。小弟這廂有禮了。

1.話很少說先上效果圖

本人的測試頁面：javascript

點擊百度地圖導航，打開百度地圖APP：php

點擊高德地圖導航，打開高德地圖APP：
css

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}&region=${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>複製代碼