前言
小程序实操,间隔计算总结。
思路
一共有两种办法,各有利弊:
1. 利用小程序的 wx.getLocation 办法失去用户的经纬度, 而后用已知的商家的经纬进行计算;
2. 利用腾讯地图位置服务 calculateDistance 间接计算;
先相熟下两个单词:
longitude: 经度;
latitude: 纬度;
下边是两种办法的具体实现
一、获取用户的地位信息, 再进行计算 (wx.getLocation)
1. 小程序提供了获取用户地位信息的 api,所以咱们能间接获取到经纬度;
2. 在腾讯位置服务坐标拾取器,获取商家的具体经纬度 (例:北京故宫博物院 116.397027( 经度),39.917990(纬度));
3. 利用公式进行两点的经纬度计算,需注意:小程序默认坐标系是 wgs84,您需设置为 gcj02 再试;
代码:
Page({data:{},
onLoad: function() {
var _this = this;
_this.findXy() // 查问用户与商家的间隔},
findXy() { // 获取用户的经纬度
var _this = this
wx.getLocation({
type: 'gcj02',
success(res) {_this.getDistance(res.latitude, res.longitude, 39.917990,116.397027)
}
})
},
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、求两点间隔文档:腾讯地位 - 两点求距
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.917990, // 商家的纬度
longitude: 116.397027, // 商家的经度
}],
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 也写上,webservice 域名白名单设置为空即可。
保留完,从新编译再试
作者:大师兄
链接:https://segmentfault.com/a/11…
起源:SegmentFault
著作权归作者所有。商业转载请分割作者取得受权,非商业转载请注明出处。