部分 Android 手机的 H5 嵌入页面无法获取当前定位

发现问题:

  • 内嵌到手机客户端的考勤打卡 H5 页面,通过调用百度地图 API 进行定位。
  • 所有 IOS 手机都会弹窗提示是否允许获取当前定位,经用户授权能准确定位到当前位置。
  • 但部分 Android 手机无法获取当前定位。
  • 注:手机关于该APP的定位权限均已开启!

定位问题:

论调试工具的重要性:
  • 在 H5 页面引入 vConsole,以便在手机端查看控制台信息。
  • 打印当前定位结果的经纬度,显示为负数(即无效定位)。
开启排查之旅:

问题1:部分 Android 手机无法获取当前定位

  1. BMap API 密钥 ak 过期或不可用?
    • 将引入的百度地图 API 链接的 key 值替换成新申请的 ak,经纬度依旧是负数。
  2. 经沟通,得知手机客户端统一使用的是高德地图 SDK,地图 API 不一致导致无法定位?
    • 将百度地图 API 替换成高德地图 API;
    • 高德地图 API 获取当前定位失败,返回 Geolocation permission denied.
  3. 为了进一步确定是 Android 客户端的问题,在手机浏览器访问https://m.amap.com/,同时,在 APP 内访问 https://m.amap.com/
    • 经测试,手机浏览器访问高德地图链接,能正常获取当前定位;
    • 但 APP 端访问该链接时,定位按钮 loading 很久,最后置灰,弹窗显示“暂时无法获取定位”;
    • 至此,可以放心地把球踢给 Android 同事了。
  4. 经过 Android 同事的排查,开启了 SDK 的辅助 H5 定位功能,我们终于能拿到当前定位的经纬度了,喜大普奔!!
问题总是接踵而来~~

问题2:百度地图经纬度和高德地图经纬度不一致,导致打卡定位不准确

  1. PC 端-后台管理系统录入单位的定位信息时,使用的是百度地图 API,H5 打卡页面本来也是用的百度地图 API,后来为了与手机 APP 保持一致,H5 页面更换为高德地图 API。将PC 端-后台管理系统的百度地图 API 也替换成高德地图 API?
    • 这个方案并不可取,对于历史项目,一般情况不要做大面积改动;
    • H5 打卡页面只涉及一两个页面,影响范围是可控的;PC端交互更为复杂,影响到的业务范围相对不可控;
    • 因此,重构 PC 端的地图 API 方案被弊了...
  2. 经网上一顿搜查,发现高德地图经纬度和百度地图经纬度可以互转,如下:
/**
 * 百度地图经纬度 转换为 高德地图经纬度
 * 
 * @param {Number} lng 百度地图-经度
 * @param {Number} lat 百度地图-纬度
 * @return {Object} 高德地图经纬度
 */
function bMapTransferAMap (lng, lat) {
  let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  let x = lng - 0.0065;
  let y = lat - 0.006;
  let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  let lngs = z * Math.cos(theta);
  let lats = z * Math.sin(theta);
  
  return {
    lng: lngs,
    lat: lats        
  }   
}

/**
 * 高德地图经纬度 转换为 百度地图经纬度
 * 
 * @param {Number} lng 高德地图-经度
 * @param {Number} lat 高德地图-纬度
 * @return {Object} 百度地图经纬度
 */
function aMapTransferBMap (lng, lat) {
  let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  let x = lng;
  let y = lat;
  let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
  let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
  let lngs = z * Math.cos(theta) + 0.0065;
  let lats = z * Math.sin(theta) + 0.006;

  return {
    lng: lngs,
    lat: lats 
  } 
}
  1. 高德地图 API 也提供了坐标转换接口,能够将用户输入的非高德坐标(GPS坐标、mapbar坐标、baidu坐标)转换成高德坐标,请参考 坐标转换-API文档-开发指南-Web服务 API | 高德地图API
经反复自测,该 bug 总算圆满解决,可以洗洗睡咯 ~^ - ^~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,837评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,551评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,417评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,448评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,524评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,554评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,569评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,316评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,766评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,912评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,560评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2 352

推荐阅读更多精彩内容