H5页面获取用户位置信息方案及测试流程

背景：最近在开发微信H5页面时需要获取用户位置信息，实际调研开发后总结一下，避免其他人踩坑。

1.调研

微信h5获取定位的方案调研结果如下，都需要在https环境下才能定位准确，出于开发成本考虑选择第1个；

1. 自带的h5定位geolocation，不需要引入任何文件或者配置；
2. 百度地图api，需要引入百度地图api包和配置ak；
3. 通过微信jssdk获取位置，需要前端、服务端都改动，还需要根据微信jssdk中给出的加密方式做加密，公众号也需要做配置；

2.实现

app端内：使用app封装的公用方法获取用户定位信息；
app端外：h5定位geolocation方式

• navigator.geolocation.getCurrentPosition获取用户位置longitude和latitude；
• 调用接口，参数传递longitude和latitude获取位置信息和城市信息；
• 兜底方案，如果获取不到用户定位，设置默认坐标；

3.本地测试

• 本地环境：

  1. 启动本地项目，如本地项目端口为3000；
  2. 下载local-ssl-proxy在本地启动https服务，如local-ssl-proxy --source 9000 --target 3000，表示将我本地local.baidu.com:3000的服务代理到https://local.baidu.com:9000;
  3. 抓包工具里设置代理，将https://local.baidu.com:9000代理到local.baidu.com:3000，手机上链接抓包工具后，访问local-ssl-proxy代理到的https服务即可测试定位，如https://local.baidu.com:9000；

• 其他环境：

  1. 使用抓包工具将https代理到测试环境，手机链接抓包工具后即可访问。
  2. 如测试环境地址为http://baidu.com/login，抓包工具代理将https://baidu.com/login代理到http://baidu.com/login，访问路径为https://baidu.com/login