H5 如何唤起百度地图 App

最新推荐文章于 2024-09-13 16:08:52 发布

weixin_34186128

最新推荐文章于 2024-09-13 16:08:52 发布

阅读量9.7k

点赞数 2

文章标签：移动开发 javascript 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000018018944

版权

本文介绍了如何在H5页面中实现点击导航按钮时，根据用户设备上是否安装了百度地图App来决定是唤醒App还是跳转到Web端导航。在Android设备上直接使用API即可，但在iOS设备上由于特定行为，需要采用定时轮询的方式来确保正确唤起或切换到Web端导航。

摘要由CSDN通过智能技术生成

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

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

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

需要用到的百度地图的 api 文档链接如下：
http://lbsyun.baidu.com/index...

最开始的代码：

  // 尝试唤起百度地图 app
  window.location.href = scheme;
  var timeout = 600;
  var startTime = Date.now();
  var t = setTimeout(function () {
    var endTime = Date.now();
    // 当成功唤起百度地图 app 后，再返回到 h5 页面，这时 endTime - startTime 一定大于 timeout + 200； 如果唤起失败, 打开 web 端百度地图导航
    if (!startTime || (endTime - startTime) < (timeout + 200)) {