当前位置：首页 > JavaScript

Js实现附近订单

2026-04-07 12:23:54JavaScript

实现附近订单功能的核心思路

附近订单功能通常涉及地理位置计算和排序，需要获取用户当前位置，计算订单距离，并按距离排序展示。以下是具体实现方法：

获取用户地理位置

使用浏览器Geolocation API获取用户当前位置坐标：

navigator.geolocation.getCurrentPosition(
  (position) => {
    const userLat = position.coords.latitude;
    const userLng = position.coords.longitude;
    // 存储或使用这些坐标
  },
  (error) => {
    console.error("获取位置失败:", error);
  }
);

计算订单距离

使用Haversine公式计算两点间距离（单位：公里）：

function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // 地球半径(km)
  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获取订单数据后，为每个订单添加距离字段：

async function fetchAndProcessOrders(userLat, userLng) {
  const orders = await fetchOrders(); // 获取订单API
  return orders.map(order => ({
    ...order,
    distance: calculateDistance(
      userLat, 
      userLng,
      order.latitude,
      order.longitude
    )
  }));
}

排序和筛选附近订单

按距离升序排序，并可添加距离筛选：

function getNearbyOrders(orders, maxDistance = 5) {
  return orders
    .filter(order => order.distance <= maxDistance)
    .sort((a, b) => a.distance - b.distance);
}

完整示例代码

// 获取位置并处理订单
navigator.geolocation.getCurrentPosition(
  async (position) => {
    const userLat = position.coords.latitude;
    const userLng = position.coords.longitude;

    const orders = await fetchAndProcessOrders(userLat, userLng);
    const nearbyOrders = getNearbyOrders(orders);

    console.log("附近订单:", nearbyOrders);
    // 渲染到UI...
  },
  (error) => {
    console.error("位置获取错误:", error);
  }
);