uniapp定位和获取距离
文章描述：
uniapp定位当前位置和计算终点位置距离
template
循环渲染
<template>
<view class="content">
<view v-for="(item,index) in dataList" :key="index">
<view>距离:{{item.jl}} 经纬度:{{item.location}}</view>
</view>
</view>
</template>script
这里当前定位经纬度是写成了固定的
export default {
data() {
return {
// 当前定位
location:{
lat:'30.654342',
lng:'104.080714'
},
// x经度longitude,y纬度latitude
dataList:[
{location:'104.081876,30.503852'}, // 成都 - 金地天府城
{location:'106.10668,30.825124'}, // 南充 - 果州丽府
],
}
},
onShow() {
this.dataList.forEach(item => {
var s = this.distance(item.location.split(',')[1], item.location.split(',')[0]) //调用计算方法（经度，纬度）传值
this.$set(item, 'jl', s) //把距离存储到dataList中
})
console.log(this.dataList)
},
methods: {
//根据金纬度计算距离
distance(lat1, lng1) {
var that = this;
let lat2 = that.location.lat;
let lng2 = that.location.lng;
let rad1 = lat1 * Math.PI / 180.0;
let rad2 = lat2 * Math.PI / 180.0;
let a = rad1 - rad2;
let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) *
Math.cos(
rad2) * Math.pow(
Math.sin(b / 2), 2)));
s = s * 6378.137;
s = Math.round(s * 10000) / 10000;
s = s.toString();
s = s.substring(0, s.indexOf('.') + 2);
return s
},
initPage: async function() {
this.location = await this.getLocation()
this.getList()
}
}
//...
}
Hbuilder里面设置微信小程序 → 位置接口
微信小程序→开发→开发管理→接口设置
wx.getLocation审核不通过，建议使用wx.getFuzzyLocation、wx.chooseLocation或wx.choosePoi、wx.chooseAddress接口实现上述场景。
发布时间：2023/01/13
发表评论