部分 Android 手机的 H5 嵌入页面无法获取当前定位
2021-07-10 本文已影响0人
Crisyhuang
发现问题：
- 内嵌到手机客户端的考勤打卡 H5 页面，通过调用百度地图 API 进行定位。
- 所有 IOS 手机都会弹窗提示是否允许获取当前定位，经用户授权能准确定位到当前位置。
- 但部分 Android 手机无法获取当前定位。
- 注：手机关于该APP的定位权限均已开启！
定位问题：
论调试工具的重要性：
- 在 H5 页面引入 vConsole，以便在手机端查看控制台信息。
- 打印当前定位结果的经纬度，显示为负数（即无效定位）。
开启排查之旅：
问题1：部分 Android 手机无法获取当前定位
- BMap API 密钥 ak 过期或不可用？
- 将引入的百度地图 API 链接的 key 值替换成新申请的 ak，经纬度依旧是负数。
- 经沟通，得知手机客户端统一使用的是高德地图 SDK，地图 API 不一致导致无法定位？
- 将百度地图 API 替换成高德地图 API；
- 高德地图 API 获取当前定位失败，返回 Geolocation permission denied.
- 为了进一步确定是 Android 客户端的问题，在手机浏览器访问https://m.amap.com/，同时，在 APP 内访问 https://m.amap.com/
- 经测试，手机浏览器访问高德地图链接，能正常获取当前定位；
- 但 APP 端访问该链接时，定位按钮 loading 很久，最后置灰，弹窗显示“暂时无法获取定位”;
- 至此，可以放心地把球踢给 Android 同事了。
- 经过 Android 同事的排查，开启了 SDK 的辅助 H5 定位功能，我们终于能拿到当前定位的经纬度了，喜大普奔！！
问题总是接踵而来~~
问题2：百度地图经纬度和高德地图经纬度不一致，导致打卡定位不准确
- PC 端-后台管理系统录入单位的定位信息时，使用的是百度地图 API，H5 打卡页面本来也是用的百度地图 API，后来为了与手机 APP 保持一致，H5 页面更换为高德地图 API。将PC 端-后台管理系统的百度地图 API 也替换成高德地图 API？
- 这个方案并不可取，对于历史项目，一般情况不要做大面积改动；
- H5 打卡页面只涉及一两个页面，影响范围是可控的；PC端交互更为复杂，影响到的业务范围相对不可控；
- 因此，重构 PC 端的地图 API 方案被弊了...
- 经网上一顿搜查，发现高德地图经纬度和百度地图经纬度可以互转，如下：
/**
* 百度地图经纬度 转换为 高德地图经纬度
*
* @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
}
}
- 高德地图 API 也提供了坐标转换接口，能够将用户输入的非高德坐标（GPS坐标、mapbar坐标、baidu坐标）转换成高德坐标，请参考 坐标转换-API文档-开发指南-Web服务 API | 高德地图API
