js实现测距
使用Geolocation API获取位置信息
通过浏览器内置的Geolocation API可以获取用户当前位置的经纬度坐标。该API需要用户授权,适用于网页端实现测距功能。

navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`当前位置: ${lat}, ${lng}`);
},
(error) => {
console.error("获取位置失败:", error.message);
}
);
计算两点间距离(Haversine公式)
已知两个点的经纬度坐标时,可通过Haversine公式计算球面距离。该公式考虑了地球曲率,精度较高。

function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // 地球半径(公里)
const dLat = (lat2 - lat1) * Math.PI / 180;
const dLon = (lon2 - lon1) * Math.PI / 180;
const a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180) *
Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon/2) * Math.sin(dLon/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c; // 返回公里数
}
结合地图API实现可视化测距
使用Google Maps API或百度地图API等可实现可视化测距功能。以下是Google Maps的示例:
// 初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: { lat: 39.9042, lng: 116.4074 } // 北京坐标
});
// 创建测距工具
const distanceService = new google.maps.DistanceMatrixService();
distanceService.getDistanceMatrix({
origins: ["北京市"],
destinations: ["上海市"],
travelMode: "DRIVING",
}, (response) => {
console.log(response.rows[0].elements[0].distance.text);
});
使用WebRTC实现设备间测距
通过WebRTC的RTCPeerConnection可以估算设备间的网络延迟,进而推算大致距离(精度较低):
const pc = new RTCPeerConnection();
pc.createDataChannel("distance");
pc.onicecandidate = (e) => {
if (e.candidate) {
// 通过ICE候选信息估算延迟
const rtt = estimateRoundTripTime(e.candidate);
const distance = rtt * 0.5 * 200; // 简化估算公式
}
};
注意事项
- 浏览器定位精度受设备GPS模块影响,城市中误差可能在50-100米
- 跨设备测距需要双方共享位置信息
- 企业级应用建议使用专业SDK如高德地图、Mapbox等
- 隐私政策要求必须明确告知用户位置数据用途
以上方法可根据实际需求组合使用,Haversine公式适合计算静态坐标距离,地图API适合需要可视化展示的场景。






