如何获取用户当前经纬度并计算至目标地的英里距离？

当然有办法实现你的需求！我来一步步帮你搞定：

1. 获取用户当前经纬度 #

首先得拿到用户的实时位置，浏览器自带的Geolocation API就能轻松做到，完全不需要额外依赖。示例代码如下：

// 请求用户授权获取位置
navigator.geolocation.getCurrentPosition(
  (position) => {
    // 成功获取到用户经纬度
    const userLat = position.coords.latitude;
    const userLon = position.coords.longitude;
    console.log(`用户当前位置：${userLat}, ${userLon}`);
    
    // 这里可以调用后续的距离计算和地图展示函数
    calculateAndDisplayRoute(userLat, userLon);
  },
  (error) => {
    // 处理获取失败的情况（比如用户拒绝授权）
    switch(error.code) {
      case error.PERMISSION_DENIED:
        alert("请允许获取位置权限，否则无法计算距离和展示路线");
        break;
      case error.POSITION_UNAVAILABLE:
        alert("当前无法获取位置信息");
        break;
    }
  }
);

2. 计算两地英里距离 #

拿到用户和目标地的经纬度后，用Haversine公式计算球面直线距离，再转换成英里（1公里≈0.621371英里）。示例函数如下：

// 计算两地英里距离的函数
function calculateMilesDistance(userLat, userLon, targetLat, targetLon) {
  // 将度数转换为弧度（公式要求）
  const toRadian = (deg) => deg * Math.PI / 180;
  
  const latDiff = toRadian(targetLat - userLat);
  const lonDiff = toRadian(targetLon - userLon);
  
  const a = 
    Math.sin(latDiff / 2) * Math.sin(latDiff / 2) +
    Math.cos(toRadian(userLat)) * Math.cos(toRadian(targetLat)) *
    Math.sin(lonDiff / 2) * Math.sin(lonDiff / 2);
  
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const earthRadiusKm = 6371; // 地球半径（公里）
  const distanceKm = earthRadiusKm * c;
  const distanceMiles = distanceKm * 0.621371; // 转换为英里
  
  return distanceMiles.toFixed(2); // 保留两位小数
}

3. 展示从用户位置到目标地的地图 #

假设你用的是Google Maps（开源方案可以用Leaflet搭配Routing Machine插件，逻辑类似），可以用它的方向服务来生成并绘制路线：

function calculateAndDisplayRoute(userLat, userLon) {
  // 从你的JSON文件中取出目标地经纬度
  const targetLat = 你的目标纬度;
  const targetLon = 你的目标经度;
  
  // 计算英里距离并展示
  const miles = calculateMilesDistance(userLat, userLon, targetLat, targetLon);
  document.getElementById("distance-display").textContent = `到目标地的距离：${miles} 英里`;
  
  // 初始化Google Maps地图
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: userLat, lng: userLon },
    zoom: 12,
  });
  
  // 创建方向服务请求
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
  
  directionsService.route({
    origin: new google.maps.LatLng(userLat, userLon),
    destination: new google.maps.LatLng(targetLat, targetLon),
    travelMode: google.maps.TravelMode.DRIVING, // 可选：WALKING、TRANSIT等
  }, (response, status) => {
    if (status === "OK") {
      directionsRenderer.setDirections(response);
    } else {
      alert(`无法获取路线：${status}`);
    }
  });
}

额外注意事项 #

• 使用Google Maps需要先申请API密钥，并在页面中引入Maps脚本：<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=directions"></script>
• 如果用户拒绝授权定位，要给出友好提示，引导用户开启权限
• 开源方案Leaflet的话，可以用leaflet-routing-machine插件来实现路线绘制，不需要API密钥，适合不想用商业服务的场景

内容的提问来源于stack exchange，提问作者Anjali