// 计算两者之间的距离 distance() { const R = 6371; // 地球半径,单位千米 const lat1 = this.markers[0].latitude; const lon1 = this.markers[0].longitude; const lat2 = this.markersn[0].latitude const lon2 = this.markersn[0].longitude const dLat = this.rad(lat2 - lat1); const dLon = this.rad(lon2 - lon1); const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.rad(lat1)) * Math.cos(this.rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); const d = R * c * 1000; // 转为米 return d.toFixed(2); }, // 辅助方法,将角度转为弧度 rad(d) { return d * Math.PI / 180.0; }, uniapp中,令以上代码每隔一秒钟便重新计算一次数据,并实时渲染到页面上
时间: 2024-01-09 20:04:04 浏览: 12
你可以在组件的 mounted 生命周期函数中使用 setInterval 方法每隔一秒钟调用 distance 方法并将结果渲染到页面上。具体实现如下:
```javascript
mounted() {
// 每隔一秒钟调用 distance 方法并将结果渲染到页面上
setInterval(() => {
const distance = this.distance();
this.distanceText = `距离:${distance} 米`;
}, 1000);
}
```
其中,distanceText 是一个 data 属性,用于存储距离的文本信息,你可以在页面上使用 {{ distanceText }} 的方式将它渲染出来。
相关问题
// 计算两者之间的距离 distance() { const R = 6371; // 地球半径,单位千米 const lat1 = this.markers[0].latitude; const lon1 = this.markers[0].longitude; const lat2 = this.markersn[0].latitude const lon2 = this.markersn[0].longitude const dLat = this.rad(lat2 - lat1); const dLon = this.rad(lon2 - lon1); const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.rad(lat1)) * Math.cos(this.rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); const d = R * c * 1000; // 转为米 return d.toFixed(2); }, // 辅助方法,将角度转为弧度 rad(d) { return d * Math.PI / 180.0; }, uniapp中,令以上代码每隔一秒钟便自动调用一次
你可以使用 `setInterval` 函数来实现每隔一秒钟自动调用 `distance` 方法。
示例代码:
```javascript
// 在页面加载完成后调用
mounted() {
// 每隔一秒钟调用一次 distance 方法
setInterval(() => {
const d = this.distance();
console.log(`距离为:${d} 米`);
}, 1000);
},
```
请注意,`setInterval` 函数的第二个参数是时间间隔,单位是毫秒。在上面的示例中,我们将时间间隔设置为 1000 毫秒(即 1 秒钟)。
uniapp的map组件,显示标记距离
Uniapp的map组件可以通过计算两个标记之间的距离来显示它们之间的距离。可以使用Haversine公式来计算两个地理位置之间的距离,该公式可以计算出两个经纬度之间的距离。以下是一个示例代码,可以根据需要进行修改:
```html
<template>
<view>
<map :polyline="polyline" :markers="markers"></map>
<view>{{distance}} km</view>
</view>
</template>
<script>
export default {
data() {
return {
polyline: [],
markers: [{
id: 1,
latitude: 39.90469,
longitude: 116.40717,
label: {
content: '北京市',
color: '#FF0000',
fontSize: 16,
borderRadius: 10,
bgColor: '#FFFFFF',
padding: 5
}
}, {
id: 2,
latitude: 31.23037,
longitude: 121.4737,
label: {
content: '上海市',
color: '#FF0000',
fontSize: 16,
borderRadius: 10,
bgColor: '#FFFFFF',
padding: 5
}
}],
distance: ''
}
},
methods: {
getDistance(lat1, lng1, lat2, lng2) {
const radLat1 = lat1 * Math.PI / 180.0;
const radLat2 = lat2 * Math.PI / 180.0;
const a = radLat1 - radLat2;
const 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(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
s = s * 6378.137;
s = Math.round(s * 10000) / 10000;
return s.toFixed(2);
},
updateDistance() {
const marker1 = this.markers[0];
const marker2 = this.markers[1];
this.distance = this.getDistance(marker1.latitude, marker1.longitude, marker2.latitude, marker2.longitude);
}
},
mounted() {
this.polyline = [{
points: [{
latitude: this.markers[0].latitude,
longitude: this.markers[0].longitude
}, {
latitude: this.markers[1].latitude,
longitude: this.markers[1].longitude
}],
color: "#FF0000DD",
width: 2,
dottedLine: true
}];
this.updateDistance();
}
}
</script>
```
在上面的代码中,我们使用了getDistance方法来计算两个标记之间的距离,并在页面上显示它。我们还使用了polyline属性来绘制标记之间的连线,并使用markers属性来设置标记的位置和标注信息。在mounted方法中,我们初始化了polyline和distance,并调用了updateDistance方法来计算并显示距离。