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

你可能感兴趣的:(前端,html5,前端,html5)