部分 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 
  } 
}

3. 高德地图 API 也提供了坐标转换接口，能够将用户输入的非高德坐标（GPS坐标、mapbar坐标、baidu坐标）转换成高德坐标，请参考 坐标转换-API文档-开发指南-Web服务 API | 高德地图API

经反复自测，该 bug 总算圆满解决，可以洗洗睡咯 ~^ - ^~