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


Posted in HTML / CSS onJanuary 27, 2019

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

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

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

需要用到的百度地图的 api 文档链接如下:http://lbsyun.baidu.com/index.php?title=uri/api/ios

最开始的代码:

// 尝试唤起百度地图 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)) {
       window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html';
    }
  }, timeout);

问题:

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

所以需要换一种方式,总的思路是:

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

修改后的代码:

var startTime = Date.now();
  var count = 0;
  var endTime = 0;
  var t = setInterval(function () {
    count += 1;
    endTime = Date.now() - startTime;
    if (endTime > 800) {
      clearInterval(t);
    }
    if (count < 30) return;
    if (!(document.hidden || document.webkitHidden)) {
      window.location.href = 'http://api.map.baidu.com/direction' + 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=' + urlObject.lat + ',' + urlObject.lng + '®ion=' + urlObject.city + '&coord_type=bd09ll&mode=driving';

          if (isIOS()) {
            // ios 端
            scheme = 'baidumap://map/direction' + queryStr;
          } else {
            // android 端
            scheme = 'bdapp://map/direction' + queryStr;
          }

          // 主要实现代码
          window.location.href = scheme;
          
          var startTime = Date.now();
          var count = 0;
          var endTime = 0;
          
          var t = setInterval(function () {
            count += 1;
            endTime = Date.now() - startTime;
            if (endTime > 800) {
              clearInterval(t);
            }
            if (count < 30) return;
            if (!(document.hidden || document.webkitHidden)) {
              window.location.href = 'http://api.map.baidu.com/direction' + queryStr + '&output=html';
            }
          }, 20);

          window.onblur = function () {
            clearInterval(t);
          };
        } else {
          alert('获取不到定位,请检查手机定位设置');
        }
      }
    });
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 #HTML / CSS
web页面录屏实现
Feb 12 #HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 #HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 #HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 #HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 #HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 #HTML / CSS
You might like
php 中include()与require()的对比
2006/10/09 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
举例讲解Python中is和id的用法
2015/04/03 Python
Python读写unicode文件的方法
2015/07/10 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python mysql中in参数化说明
2020/06/05 Python
美国家具网站:Cymax
2016/09/17 全球购物
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
简历自我评价模版
2014/01/31 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python