我们获取到经纬度信息后,如何将其转换为距离当前xxkm
这种状态呢?
在js文件中,我们可以定义两个方法:
1.方法第一步:将经纬度转换为弧度rad
rad (d) {
return d * Math.PI / 180.0;
},
2.方法第二步:进行计算
getDistance(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; // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000; //输出为公里
var distance = s;
var distance_str = "";
if (parseInt(distance) >= 1) {
distance_str = distance.toFixed(1) + "km";
} else {
distance_str = distance * 1000 + "m";
}
//s=s.toFixed(4);
console.info('距离是', s);
console.info('距离是', distance_str);
return s;
},
3.第三步:将上篇获取经纬度信息的方法进行一下修改,获取经纬度信息后,将获取到的经纬度信息与目标信息作为参数传入getDistance()方法
data: {
disKm:'0',
},
onLoad: function () {
// 获取经纬度信息
wx.getLocation({
isHighAccuracy: true,
success:(res)=> {
const latitude = res.latitude;
const longitude = res.longitude;
const resKm = this.getDistance(latitude,longitude,39.95,116.332455);
this.setData({
disKm:resKm
})
}
})
}
打印结果为:
距离是 8.1315
距离是 8.1km
4.wxml页面上可以显示获取距离
<view class="container">
<view>小程序定位功能:{{disKm}}</view>
</view>
一直在路上,有我有你,加油~