# H5 定位 API

在最近一次开发中, 远端代码使用了 H5 定位的 API(Geolocation), 始终无法在 webview 中获取位置, 后来各种尝试终于解决问题, 因此做一个总结

接下来的内容中我们将通过以下几个部分来阐述:

  • 开启 https
  • 使用 Geolocation
  • 第三方定位服务

# 开启 https

由于Geolocation需要安全协议下使用,因此需要开启https, 我们本地开发中使用的是webpack-dev-server代理服务, 因此需要配置 https 服务, 此处直接贴出开启的代码

module.exports = {
  devServer: {
    https: true
  }
}

配置好开启服务后发现无法打开页面, 提示证书不受信任

证书不信任

webpack-dev-serve开启https后, 会自动生成一个证书在node_modules/webpack-dev-server/ssl/server.pem, 需要将该证书导入到系统中,并开启始终信任

# 使用 Geolocation

Geolocation.getCurrentPosition() 方法用来获取设备当前位置

navigator.geolocation.getCurrentPosition(success, error, options)

详见MDN-Geolocation (opens new window)

此处我要说的是一定要注意第三个参数, 这个 PositionOptions 参数控制超时等, 关键性的决定了定位的成功与否, 在本次出现的问题中, 大概率出现了定位失败; 最终通过如下的配置得以完美解决

const options = {
  enableHighAccuracy: false,
  maximumAge: Infinity,
  timeout: 60000
}

# 第三方定位服务

其实 JS 提供的定位 API 的局限性非常大, 一是兼容性并不好, 二来定位精确性也不高;所以涌现了大量的第三方的定位服务, 其中做的非常好的有高德、百度、腾讯等;

此处记录几个他们官方的文档连接, 待以后需要用的时候再来翻阅