背景:最近在开发微信H5页面时需要获取用户位置信息,实际调研开发后总结一下,避免其他人踩坑。
1.调研
微信h5获取定位的方案调研结果如下,都需要在https环境下才能定位准确,出于开发成本考虑选择第1个;
- 自带的h5定位geolocation,不需要引入任何文件或者配置;
- 百度地图api,需要引入百度地图api包和配置ak;
- 通过微信jssdk获取位置,需要前端、服务端都改动,还需要根据微信jssdk中给出的加密方式做加密,公众号也需要做配置;
2.实现
app端内:使用app封装的公用方法获取用户定位信息;
app端外:h5定位geolocation方式
- navigator.geolocation.getCurrentPosition获取用户位置longitude和latitude;
- 调用接口,参数传递longitude和latitude获取位置信息和城市信息;
- 兜底方案,如果获取不到用户定位,设置默认坐标;
3.本地测试
-
本地环境:
- 启动本地项目,如本地项目端口为3000;
- 下载local-ssl-proxy在本地启动https服务,如local-ssl-proxy --source 9000 --target 3000,表示将我本地local.baidu.com:3000的服务代理到https://local.baidu.com:9000;
- 抓包工具里设置代理,将https://local.baidu.com:9000代理到local.baidu.com:3000,手机上链接抓包工具后,访问local-ssl-proxy代理到的https服务即可测试定位,如https://local.baidu.com:9000;
-
其他环境:
- 使用抓包工具将https代理到测试环境,手机链接抓包工具后即可访问。
- 如测试环境地址为http://baidu.com/login,抓包工具代理将https://baidu.com/login代理到http://baidu.com/login,访问路径为https://baidu.com/login