微信小程序计算用户离商家的距离(利用经纬度求距)

[复制链接]
查看: 3676|回复: 9
  • 萌哒
    2018-11-19 14:03
  • 发表于 2019-1-23 14:19:06 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    前言

    最近在帮朋友(商家)写小程序,所以看了不少关于小程序的知识,总结一下计算距离这条线。
    思路

    一共有两种方法,各有利弊:
    1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算;
    2.利用腾讯地图位置服务calculateDistance直接计算

    先熟悉下两个单词:
    **longitude:经度;
    latitude:纬度;**
    下边是两种方法的具体实现

    一、获取用户的位置信息,再进行计算(wx.getLocation)

    1.小程序提供了获取用户位置信息的api,所以我们能直接获取到经纬度;
    2.在百度拾取坐标系统,获取商家的具体经纬度(例:北京故宫116.403414(经度),39.924091(纬度)。)
    3.利用公式进行两点的经纬度计算

    代码:
    Page({ data:{ }, onLoad: function() { var _this = this; _this.findXy() //查询用户与商家的距离 }, findXy() { //获取用户的经纬度 var _this = this wx.getLocation({ type: 'wgs84', success(res) { _this.getDistance(res.latitude, res.longitude, 39.924091,116.403414) } }) }, Rad: function(d) { //根据经纬度判断距离 return d * Math.PI / 180.0; }, getDistance: function(lat1, lng1, lat2, lng2) { // lat1用户的纬度 // lng1用户的经度 // lat2商家的纬度 // lng2商家的经度 var radLat1 = this.Rad(lat1); var radLat2 = this.Rad(lat2); var a = radLat1 - radLat2; var b = this.Rad(lng1) - this.Rad(lng2); var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * 6378.137; s = Math.round(s * 10000) / 10000; s = s.toFixed(2) + '公里' //保留两位小数 console.log('经纬度计算的距离:' + s) return s } )}二、利用腾讯地图的位置服务

    1.这里配置的地方就比较多一点了,先到腾讯位置服务注册登录,申请key、引入依赖。
    下图的第三步配置是要在小程序的后台那里设置,记得不要找错地方了。如图:

    100036r299mjj7e8mzw82m.png

    2.配置完成了之后,小程序重新编译一下
    3.我们看下腾讯的api,是怎么求两点距离的腾讯位置-两点求距
    4.读完可知,我们只需要商家的经纬度即可,我们在小程序里实验一下

    // 引入SDK核心类var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');Page({ onLoad: function() { var _this = this; _this.findShop() //查询用户与商家的距离 }, findShop() { //拿到商家的地理位置,用到了腾讯地图的api // 实例化API核心类 var _that = this var demo = new QQMapWX({ key: '你申请到的key' // 必填 }); // 调用接口 demo.calculateDistance({ to: [{ latitude: 39.924091, //商家的纬度 longitude: 116.403414, //商家的经度 }], success: function(res) { let hw = res.result.elements[0].distance //拿到距离(米) if (hw && hw !== -1) { //拿到正确的值 //转换成公里 hw = (hw / 2 / 500).toFixed(2) + '公里' } else { hw = "距离太近或请刷新重试" } console.log('腾讯地图计算距离商家' + hw); } }); }})可能会出现的错误:
    {status:199,message:'此key未开启webservice功能'},
    不要紧,打开腾讯位置-key配置,设置一下刚才申请key的详情页面,把下列选项全部勾上,把你小程序的appid也写上。
    保存完,重新编译再试 100036r299mjj7e8mzw82m.png

    优缺点

    优点:
    第一种方法,不用配置任何东西,只需两点的经纬度即可,没有使用次数限制;
    第二种方法,不需要自己计算,腾讯会计算好,距离比较精确,只需要只要商家的经纬度即可

    缺点:
    第一种方法,计算精度上可能有待考量,在我的实验下,感觉是在上帝视角,直接计算两个点的距离,不过好像两点距离不太远,问题不大;
    下图是我用两种方法计算的杭州-石家庄的距离,方法一显然比腾讯的少一点距离,腾讯可能参考了一些实际的路程、路况之类的吧,感觉跟从地图上查行程规划出来的距离差不多。

    100036r299mjj7e8mzw82m.png

    第二种方法,有使用次数上的限制,每天只能用1万次,当然可以再去买配额

    建议

    既然腾讯的api有使用次数限制,那我们就写个方法,先用腾讯的,加上判断,用完了再用 经纬度计算的。当然,有钱的大佬可以另外买腾讯的配额。
    发表于 2019-1-24 13:34:25 | 显示全部楼层
    我只是路过打酱油的
    回复

    使用道具 举报

    发表于 2019-2-3 12:55:53 | 显示全部楼层
    正需要,支持楼主大人了!
    回复

    使用道具 举报

    发表于 2019-2-3 19:10:09 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复

    使用道具 举报

    发表于 7 天前 | 显示全部楼层
    珍惜生命,果断回帖。
    回复

    使用道具 举报

    发表于 6 天前 | 显示全部楼层
    么有分,谁能送我点积分啊::>_<::
    回复

    使用道具 举报

    发表于 6 天前 | 显示全部楼层
    回的人少,我来小顶一下
    回复

    使用道具 举报

    发表于 6 天前 | 显示全部楼层
    这个帖一般般,还可以哦。
    回复

    使用道具 举报

    发表于 前天 17:29 | 显示全部楼层
    额,看不懂在说神马~@_@
    回复

    使用道具 举报

    发表于 前天 19:19 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

     
     
    技术支持
    在线客服
    售后交流群瑞恩社区™售后</font><br><span>交流
    工作时间:
    8:00-18:00
    客服热线:
    15368564009
    微信扫一扫
    返回顶部 关注微信 下载APP 返回列表