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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 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的一些基础知识分享
2011/07/27 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
基于php split()函数的用法详解
2013/06/05 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP SOCKET编程详解
2015/05/22 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
php实现微信支付之现金红包
2018/05/30 PHP
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
运动会解说词100字
2014/01/31 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
党员活动总结
2015/02/04 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL