![cfda9bcaffa72fc021e38318eb7afb43.png](https://i-blog.csdnimg.cn/blog_migrate/dff782cbe8f93c3476cd60870270370f.jpeg)
转载链接:https://juejin.im/post/5e7e126b51882573c508be13
背景
最近在做一个类似支付宝口碑商家的功能模块,其中有个功能就是计算出用户与商家的距离,如下图:
![d819eb61baadb63570c7a6bf64d2d465.png](https://i-blog.csdnimg.cn/blog_migrate/70de65577cd8e2df1e639cea41a3915c.jpeg)
支付宝口碑商家页面截图
思路分析
1、商家选取店铺地址,将坐标经纬度存入数据库;
2、移动端定位当前用户坐标经纬度;
3、将商家经纬度从数据库取出与当前用户经纬度进行计算;
4、计算出的距离显示在用户端;
用到的工具
1、HTML5地理定位API;
2、百度地图API;
百度地图API使用
1、在百度地图开放平台注册开发者账号;
2、登录开发者账号,在控制台中创建应用,如下图:
![e29055a7ec766293960c6889d46dbc60.png](https://i-blog.csdnimg.cn/blog_migrate/4656636b376768627c2980b4a3d45e3a.jpeg)
注意:移动web端的话,应用类型记得选择浏览器端
代码实现
1、创建seller.html文件,用来提供商家选取地址坐标经纬度;
注意:代码中的ak="您的密钥",记得换成控制台中创建应用的AK密钥
商家选取店铺地址
请输入:
复制代码
seller.html运行效果图如下:
![6afd794fd312ff860de6f21aeb34c68d.gif](https://i-blog.csdnimg.cn/blog_migrate/0e74765f0038f18b71a2682f9abe8d99.gif)
2、创建user.html文件,用来定位用户坐标经纬度,及计算与商家的距离;
注意1:由于HTML5地理定位仅限在移动端生效,因此user.html需要在移动端下运行(可将文件直接发送到手机上,在手机上打开运行)
注意2:代码中的ak="您的密钥",记得换成控制台中创建应用的AK密钥
计算用户到商家的距离复制代码
user.html运行效果图:
1、初次运行,询问是否共享位置信息
![4078d601c7ebd52ff85599812c2a1cca.png](https://i-blog.csdnimg.cn/blog_migrate/2ea022762334ca5069f96c71f226183e.jpeg)
2、点击确认共享位置信息,弹出用户与商家的距离
![1264d46752bef019ac61d055e3a1640f.png](https://i-blog.csdnimg.cn/blog_migrate/149a51aabeada504ee5b510d356e96e3.jpeg)
总结
1、百度地图API也可定位用户的坐标经纬度,但是会出现偏移量,与实际位置相差很大,因此可使用HTML5地理定位用户的原始坐标,再将原始坐标转换成百度的定位坐标
2、由于HTML5地理定位仅限在移动端生效,因此使用HTML5地理定位需要在移动端下运行
最后
觉得文章不错的话,给我个关注哇,点个赞呗!