2025-03-28 15:19:42 +08:00
|
|
|
<template>
|
2025-05-13 11:10:38 +08:00
|
|
|
<span style="padding-left: 16rpx">{{ distance }}</span>
|
2025-03-28 15:19:42 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
2025-05-13 11:10:38 +08:00
|
|
|
import { inject, computed, watch } from 'vue';
|
2025-03-28 15:19:42 +08:00
|
|
|
const { haversine, getDistanceFromLatLonInKm } = inject('globalFunction');
|
2025-05-13 11:10:38 +08:00
|
|
|
const props = defineProps(['alat', 'along', 'blat', 'blong']);
|
|
|
|
|
|
|
|
const distance = computed(() => {
|
|
|
|
const distance2 = getDistanceFromLatLonInKm(props.alat, props.along, props.blat, props.blong);
|
|
|
|
// console.log(distance2, props.alat, props.along, props.blat, props.blong);
|
|
|
|
const { km, m } = distance2;
|
|
|
|
if (!props.alat && !props.along) {
|
2025-03-28 15:19:42 +08:00
|
|
|
return '--km';
|
|
|
|
}
|
|
|
|
if (km > 1) {
|
|
|
|
return km.toFixed(2) + 'km';
|
|
|
|
} else {
|
|
|
|
return m.toFixed(2) + 'm';
|
|
|
|
}
|
2025-05-13 11:10:38 +08:00
|
|
|
return '';
|
|
|
|
});
|
2025-03-28 15:19:42 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style></style>
|