乐趣区

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

前言
最近在帮朋友 (商家) 写小程序,所以看了不少关于小程序的知识,总结一下计算距离这条线。
思路
一共有两种方法,各有利弊: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 有使用次数限制,那我们就写个方法,先用腾讯的,加上判断,用完了再用 经纬度计算的。当然,有钱的大佬可以另外买腾讯的配额。

退出移动版