微信小程序计算用户离商家的距离

一、传入参数调用distance方法即可

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var that = this;
      // 以北京故宫为例计算当前位置到其的距离,北京故宫坐标(116.403802, 39.915405)
      wx.getLocation({
        type: 'gcj02',
        success: function (res) {
          console.log("当前坐标信息:", res)
          var distance = that.distance(res.latitude, res.longitude,39.918034,116.415192);
          console.log("当前位置距离北京故宫:", distance, "千米")
        }
      })
    // 举个栗子验证一下distance方法的真实性和有效性
    // 北京故宫坐标(116.403802,39.915405),上海虹桥机场坐标(121.334421,31.200479),地图测距结果为1066.6±10
    var testdistance=that.distance(39.915405, 116.403802, 31.200479, 121.334421);//注意经纬度别混淆
    console.log("北京故宫-上海虹桥机场的距离为:",testdistance,"千米");//结果让人很满意
  },
  /**
   * @desc 由经纬度计算两点之间的距离,la为latitude缩写,lo为longitude
   * @param la1 第一个坐标点的纬度
   * @param lo1 第一个坐标点的经度
   * @param la2 第二个坐标点的纬度
   * @param lo2 第二个坐标点的经度
   * @return (int)s   返回距离(单位千米或公里)
   * @tips 注意经度和纬度参数别传反了,一般经度为0~180、纬度为0~90
   * 具体算法不做解释,有兴趣可以了解一下球面两点之间最短距离的计算方式
   */
  distance: function (la1, lo1, la2, lo2) {
    var La1 = la1 * Math.PI / 180.0;
    var La2 = la2 * Math.PI / 180.0;
    var La3 = La1 - La2;
    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
    s = s * 6378.137;
    s = Math.round(s * 10000) / 10000;
    s = s.toFixed(2);
    return s;
  },
})

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

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!