Html5如何唤起百度地图App的方法

最近接手了一个需求，要求混合式开发，前端做好 h5 后将页面嵌入到 ios 和 android 中，需要用到百度地图的地图导航。具体功能点如下：

如果手机端（ios, android）安装了百度地图，点击导航按钮，唤起百度地图 app

否则，打开 web 端百度地图导航

需要用到的百度地图的 api 文档链接如下：

最开始的代码：

  // 尝试唤起百度地图 app  window.location.href = scheme;  var timeout = 600;  var starttime = date.now();  var t = ttimeout(function () {    var endtime = date.now();    // 当成功唤起百度地图 app 后，再返回到 h5 页面，这时 endtime - starttime 奥卡利那笛一定大于 timeout + 200； 如果唤起失败, 打开 web 端百度地图导航    if (!starttime || (endtime - starttime) < (tim非定向研究生eout + 200)) {       window.location.href = '/d/file/titlepic/error.html' + querystr + '&output=html';    }  }, timeout);

问题：

上面这段代码在 android 机器上运行是没有问题的，可是在 ios 上却始终执行了 ttimeout 这个计时器，所以如果在 ios 端，即使 app 处于后台，它的 h5 代码还是会执行。

所以需要换一种方式，总的思路是：

采用轮询的方式在 600 ms 内尝试唤起百度地图 app, 唤起失败后， 判断 h5 是处于前台还是后台，如果密码编码学是前台，则打开 web 端百度地图 app。不管唤起成功还是失败，过 200 ms 后都清除定时器。

修改后的代码：

  var starttime = date.now();  var count = 0;  var endtime = 0;  var t = tinte小菊的春天剧情rval(function () {    count += 1;    endtime = date.now() - starttime;    if (endtime > 800) {      clearinterval(t);    }    if (count < 30) return;    if (!(document.hidden || document.webkithidden)) {      window.location.href = '/d/file/titlepic/error.html' + querystr + '&output=html';    }  }, 20);

完整的代码：

  function wakebaidu() {    var geolocation = new bmap.geolocation();    geolocation.getcurrentposition(function (result) {      if (this.getstatus() == bmap_status_success) {        var latcurrent = result.point.lat; //获取到的纬度        var lngcurrent = result.point.lng; //获取到的经度        if (latcurrent && lngcurrent) {          var scheme = '';                    // urlobject 是我这边地址栏查询参数对象          var querystr = '?origin=name:我的位置|latlng:' + latcurrent + ',' + lngcurrent + '&destination=' + url永州学院object.lat + ',' + urlobject.lng + '&region=' + urlobject.city + '&coord_type=bd09ll&mode=driving';          if (isios()) {            // ios 端            scheme = 'baidumap://map/direction' + querystr;          } el {            // android 端            scheme = 'bdapp://map/direction' + querystr;          }          // 主要实现代码          window.location.href = scheme;                    var starttime = date.now();          var count = 0;          var endtime = 0;                    var t = tinterval(function () {            count += 1;            endtime = date.now() - starttime;            if (endtime > 800) {              clearinterval(t);            }            if (count < 30) return;            if (!(document.hidden || document.webkithidden)) {              window.location.href = '/d/file/titlepic/error.html' + querystr + '&output=html';            }          }, 20);          window.onblur = function () {            clearinterval(t);          };        } el {          alert('获取不到定位，请检查手机定位设置');        }      }    });  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。