HTML5 地理定位+地图 API:计算用户到商家的距离

声明:文章来源于微信公众号 GitWeb,转载需标明文章来源出处

最近在做一个类似支付宝口碑商家的功能模块,其中有个功能就是计算出用户与商家的距离,如下图:

HTML5 地理定位+地图 API:计算用户到商家的距离_第1张图片
image

支付宝口碑商家页面截图

思路分析


1、商家选取店铺地址,将坐标经纬度存入数据库;

2、移动端定位当前用户坐标经纬度;

3、将商家经纬度从数据库取出与当前用户经纬度进行计算;

4、计算出的距离显示在用户端;

用到的工具


1、HTML5地理定位API;

2、百度地图API;

百度地图API使用


1、在百度地图开放平台注册开发者账号;

2、登录开发者账号,在控制台中创建应用,如下图:

HTML5 地理定位+地图 API:计算用户到商家的距离_第2张图片
image

注意:移动web端的话,应用类型记得选择浏览器端

代码实现


1、创建seller.html文件,用来提供商家选取地址坐标经纬度;

注意:代码中的ak="您的密钥",记得换成控制台中创建应用的AK密钥




    
    
    
    
    商家选取店铺地址


    
请输入:

seller.html运行效果图如下:

image

2、创建user.html文件,用来定位用户坐标经纬度,及计算与商家的距离;

注意1:由于HTML5地理定位仅限在移动端生效,因此user.html需要在移动端下运行(可将文件直接发送到手机上,在手机上打开运行)

注意2:代码中的ak="您的密钥",记得换成控制台中创建应用的AK密钥




    
    
    
    计算用户到商家的距离






user.html运行效果图:

1、初次运行,询问是否共享位置信息

HTML5 地理定位+地图 API:计算用户到商家的距离_第3张图片
image

2、点击确认共享位置信息,弹出用户与商家的距离

HTML5 地理定位+地图 API:计算用户到商家的距离_第4张图片
image

总结


1、百度地图API也可定位用户的坐标经纬度,但是会出现偏移量,与实际位置相差很大,因此可使用HTML5地理定位用户的原始坐标,再将原始坐标转换成百度的定位坐标

2、由于HTML5地理定位仅限在移动端生效,因此使用HTML5地理定位需要在移动端下运行

你可能感兴趣的:(HTML5 地理定位+地图 API:计算用户到商家的距离)