当前位置：首页 > JavaScript

js实现测距

2026-04-07 03:45:54JavaScript

使用JavaScript实现测距功能

通过JavaScript可以利用浏览器提供的API或数学计算实现测距功能。以下是几种常见的方法：

使用Geolocation API计算两点间距离

Geolocation API可以获取用户当前位置的经纬度，结合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; // 返回公里数
}

// 示例：计算北京和上海的距离
const distance = calculateDistance(39.9042, 116.4074, 31.2304, 121.4737);
console.log(distance.toFixed(2) + ' km');

使用HTML5的DeviceOrientation API测量相对距离

通过加速度计和陀螺仪数据估算设备移动距离。

let lastAcceleration = null;
let totalDistance = 0;

window.addEventListener('devicemotion', (event) => {
    const acceleration = event.accelerationIncludingGravity;
    if (lastAcceleration) {
        const dx = acceleration.x - lastAcceleration.x;
        const dy = acceleration.y - lastAcceleration.y;
        const dz = acceleration.z - lastAcceleration.z;
        const distance = Math.sqrt(dx*dx + dy*dy + dz*dz);
        totalDistance += distance;
    }
    lastAcceleration = acceleration;
});

// 定期显示累计距离
setInterval(() => {
    console.log('移动距离:', totalDistance.toFixed(2));
}, 1000);

使用Canvas测量屏幕上的像素距离

在网页上通过鼠标交互测量两点间的屏幕像素距离。

const canvas = document.getElementById('measureCanvas');
const ctx = canvas.getContext('2d');
let startPoint = null;

canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    startPoint = { x: e.clientX - rect.left, y: e.clientY - rect.top };
});

canvas.addEventListener('mouseup', (e) => {
    if (!startPoint) return;

    const rect = canvas.getBoundingClientRect();
    const endPoint = { x: e.clientX - rect.left, y: e.clientY - rect.top };

    // 计算距离
    const dx = endPoint.x - startPoint.x;
    const dy = endPoint.y - startPoint.y;
    const distance = Math.sqrt(dx*dx + dy*dy);

    // 绘制测量线
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(startPoint.x, startPoint.y);
    ctx.lineTo(endPoint.x, endPoint.y);
    ctx.stroke();

    // 显示距离
    ctx.fillText(`${distance.toFixed(1)}px`, (startPoint.x + endPoint.x)/2, (startPoint.y + endPoint.y)/2);
    startPoint = null;
});

使用WebRTC测距

通过摄像头和已知物体尺寸计算物体到摄像头的距离。

js实现测距

// 需要已知物体的实际高度（厘米）
const KNOWN_HEIGHT = 20; 

function calculateDistanceFromCamera(pixelHeight, focalLength) {
    return (KNOWN_HEIGHT * focalLength) / pixelHeight;
}

// 需要通过计算机视觉检测物体并获取其在图像中的像素高度
// 这里使用伪代码表示概念
const detectedPixelHeight = 150; // 从图像分析获得
const focalLength = 500; // 相机焦距（需校准）
const distance = calculateDistanceFromCamera(detectedPixelHeight, focalLength);
console.log(`物体距离: ${distance.toFixed(1)} cm`);

这些方法可以根据不同场景需求选择使用。Geolocation适用于地理位置测距，DeviceOrientation适合移动设备相对距离测量，Canvas方法适合网页界面元素测量，WebRTC方案则适用于基于摄像头的距离测量。

标签: js