当前位置：首页 > JavaScript

js实现路线导航

2026-02-02 15:12:54JavaScript

使用 Geolocation API 获取当前位置

通过 navigator.geolocation.getCurrentPosition 获取用户当前位置的经纬度坐标。需要用户授权地理位置权限。

navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    console.log(`当前位置: ${latitude}, ${longitude}`);
  },
  (error) => {
    console.error("获取位置失败:", error.message);
  }
);

集成地图服务（如 Google Maps API）

使用第三方地图服务（如 Google Maps、Mapbox 或高德地图）显示地图并绘制路线。以 Google Maps 为例：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 39.9042, lng: 116.4074 }, // 默认中心点（北京）
  });

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);

  // 计算路线
  calculateAndDisplayRoute(directionsService, directionsRenderer);
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  directionsService.route(
    {
      origin: "北京市海淀区", // 起点
      destination: "北京市朝阳区", // 终点
      travelMode: google.maps.TravelMode.DRIVING, // 出行方式（驾车）
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        alert("路线规划失败: " + status);
      }
    }
  );
}

使用 Leaflet.js 实现轻量级导航

Leaflet 是一个开源库，适合轻量级地图需求：

const map = L.map("map").setView([39.9042, 116.4074], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);

// 添加路线
const routingControl = L.Routing.control({
  waypoints: [
    L.latLng(39.9042, 116.4074), // 起点
    L.latLng(39.9493, 116.3975), // 终点
  ],
  routeWhileDragging: true,
}).addTo(map);

实现实时导航更新

通过 watchPosition 监听位置变化，动态更新路线：

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    updateRoute(latitude, longitude); // 调用地图API更新路线
  },
  (error) => {
    console.error("位置监听失败:", error.message);
  },
  { enableHighAccuracy: true }
);

// 清除监听
// navigator.geolocation.clearWatch(watchId);