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 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 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之第十天
2006/10/09 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python Socket使用实例
2017/12/18 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
高级护理专业毕业生推荐信
2013/12/25 职场文书
三年级语文教学反思
2014/02/01 职场文书
五型班组建设方案
2014/02/10 职场文书
本科生求职信
2014/06/17 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
退货证明模板
2015/06/23 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python