当前位置：首页 > JavaScript

js实现路线导航

2026-04-07 08:49:19JavaScript

实现路线导航的JavaScript方法

使用Google Maps API

Google Maps JavaScript API提供完整的路线导航功能。需要先获取API密钥并引入库文件。

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 39.9042, lng: 116.4074 }, // 北京坐标示例
  });
  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 {
        window.alert("路线请求失败: " + status);
      }
    }
  );
}

使用百度地图API

百度地图JavaScript API同样支持路线规划功能，需先申请密钥。

var map = new BMap.Map("map-container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

var driving = new BMap.DrivingRoute(map, {
  renderOptions: { map: map, autoViewport: true }
});
driving.search("天安门", "颐和园");

使用Leaflet.js与OSRM

开源方案Leaflet结合OSRM服务可实现路线导航：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var control = L.Routing.control({
  waypoints: [
    L.latLng(57.74, 11.94),
    L.latLng(57.6792, 11.949)
  ],
  routeWhileDragging: true
}).addTo(map);

纯前端实现方案

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

js实现路线导航

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