vue实现测距工具
实现思路
基于Vue实现测距工具的核心在于利用浏览器的地理定位API（如Geolocation API）或地图服务API（如高德、百度、Google Maps）计算两点之间的距离。以下是两种常见实现方式：
方法一：纯前端实现（基于Geolocation API）
适用于不需要地图展示，仅需计算两点距离的场景。
安装依赖
npm install vue geolocation-api代码实现
<template>
<div>
<button @click="getLocation">获取当前位置</button>
<div v-if="points.length > 0">
<p>点1: {{ points[0] }}</p>
<p v-if="points.length > 1">点2: {{ points[1] }} </p>
<p v-if="points.length > 1">距离: {{ distance }} 米</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
points: [],
distance: 0
};
},
methods: {
getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords;
this.points.push({ lat: latitude, lng: longitude });
if (this.points.length === 2) {
this.calculateDistance();
}
},
error => console.error(error)
);
}
},
calculateDistance() {
const [point1, point2] = this.points;
const R = 6371e3; // 地球半径（米）
const φ1 = point1.lat * Math.PI / 180;
const φ2 = point2.lat * Math.PI / 180;
const Δφ = (point2.lat - point1.lat) * Math.PI / 180;
const Δλ = (point2.lng - point1.lng) * Math.PI / 180;
const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
this.distance = Math.round(R * c);
}
}
};
</script>方法二：基于地图API（以高德地图为例）
适用于需要地图交互的场景，支持可视化测距。
安装依赖
npm install @amap/amap-jsapi-loader代码实现
<template>
<div>
<div id="map-container" style="width: 100%; height: 400px"></div>
<p v-if="distance">距离: {{ distance }} 米</p>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
data() {
return {
map: null,
markers: [],
distance: 0
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: '你的高德地图Key',
version: '2.0',
plugins: ['AMap.RangingTool']
}).then(AMap => {
this.map = new AMap.Map('map-container');
this.addRangingTool(AMap);
});
},
addRangingTool(AMap) {
const rangingTool = new AMap.RangingTool(this.map);
rangingTool.on('end', e => {
this.distance = e.ruler.distance;
this.markers = e.ruler.points.map(point => {
return new AMap.Marker({ position: point });
});
this.map.add(this.markers);
});
rangingTool.turnOn();
}
}
};
</script>关键说明
-
Haversine公式
纯前端计算距离时使用以下公式：
a = sin²(Δφ/2) + cosφ1 * cosφ2 * sin²(Δλ/2) c = 2 * atan2(√a, √(1−a)) distance = R * c其中
R为地球半径（6371e3米）。 -
地图API选择
- 高德/百度地图适合国内项目，需申请开发者Key。
- Google Maps需处理网络访问问题。
-
注意事项
- 浏览器定位需用户授权。
- 移动端建议使用地图API（精度更高）。
- 复杂路径测距需调用API的路径规划功能。
