资讯专栏INFORMATION COLUMN

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

huaixiaoz / 801人阅读

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

前言

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

思路

一共有两种方法,各有利弊:
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、引入依赖。
下图的第三步配置是要在小程序的后台那里设置,记得不要找错地方了。如图:


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也写上。
保存完,重新编译再试

优缺点

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

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


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

建议

既然腾讯的api有使用次数限制,那我们就写个方法,先用腾讯的,加上判断,用完了再用 经纬度计算的。当然,有钱的大佬可以另外买腾讯的配额。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100110.html

相关文章

  • 最新个税计算 / 个税计算器 小程序 wepy 开发

    摘要:根据最新税改后计算个人所得税的计算器。在开发微信小程序组件框架时,我遇到了一个问题,微信小程序中的组件有特定的,背景可以用去掉,但是边框再用去掉就不可以了,这也是微信小程序与的不同之处。但是在微信小程序中使用选择器就可以实现这一功能。 根据最新税改后计算个人所得税的计算器。 如有其它疑惑,也欢迎提出任何修改意见。可以在主题下留言或者在小程序中点击联系在线客服或者加入qq群:869113...

    luqiuwen 评论0 收藏0
  • 滴滴一下,小程序专车来了

    摘要:功能三滴滴费用计算古人云细节决定成败,一个良好的微信小程序往往就是一些细节打动人心,居然是模仿,虽做不到百分百,至少还是很希望一模一样。 最近时常感叹道:时间总是那么的快,转瞬即逝。对于像我这种刚入门的小生来讲,技术每天都在更新,框架也层出不穷,有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢,一个好的建议便是静...

    SwordFly 评论0 收藏0
  • 行业log | 小程序搭载智慧零售,实现五位一体数字化营销

    摘要:零售商家通过微信支付小程序实现线上线下消费一体化,通过线上支付线下单品完成商品数据的打通。因此小程序搭载智慧零售,能助力商家实现消费场景数字化以及购买行为具象化,从新的维度提高用户服务水平。 随着移动互联网、大数据、AI等技术日益成熟,实体行业领域的转型成为业绩提升的关键。对于零售行业从业者,这意味着思维方式的自我进化,对于消费者,则意味着与产品产生新的连接,享受更加个性化、更具人情味...

    mzlogin 评论0 收藏0
  • 行业log | 小程序搭载智慧零售,实现五位一体数字化营销

    摘要:零售商家通过微信支付小程序实现线上线下消费一体化,通过线上支付线下单品完成商品数据的打通。因此小程序搭载智慧零售,能助力商家实现消费场景数字化以及购买行为具象化,从新的维度提高用户服务水平。 随着移动互联网、大数据、AI等技术日益成熟,实体行业领域的转型成为业绩提升的关键。对于零售行业从业者,这意味着思维方式的自我进化,对于消费者,则意味着与产品产生新的连接,享受更加个性化、更具人情味...

    mdluo 评论0 收藏0
  • 行业log | 小程序搭载智慧零售,实现五位一体数字化营销

    摘要:零售商家通过微信支付小程序实现线上线下消费一体化,通过线上支付线下单品完成商品数据的打通。因此小程序搭载智慧零售,能助力商家实现消费场景数字化以及购买行为具象化,从新的维度提高用户服务水平。 随着移动互联网、大数据、AI等技术日益成熟,实体行业领域的转型成为业绩提升的关键。对于零售行业从业者,这意味着思维方式的自我进化,对于消费者,则意味着与产品产生新的连接,享受更加个性化、更具人情味...

    rottengeek 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<