Leaflet地图路由路径不显示问题排查求助

核心原因分析 #

从错误日志和代码来看，导致路由无法生成的关键问题有两个：

1. 坐标不在OSRM公共服务覆盖范围
   Leaflet Routing Machine默认使用的router.project-osrm.org仅覆盖欧洲、北美等特定区域，你请求中的坐标（55.4333172,-4.6083844）位于印度洋区域，超出服务覆盖范围，因此返回400错误。

2. 潜在的坐标类型与顺序问题
   通过textContent获取的坐标是字符串类型，虽部分Leaflet方法可自动转换，但显式转为数字能避免类型错误；同时需确认DOM元素lat/lon存储的确实是纬度/经度，避免顺序颠倒。

3. 代码小问题
   变量名longtitude拼写错误（正确应为longitude），虽不影响运行，但建议修正以提升代码可读性。

修复后的完整代码 #

// 从模板传递的Django变量中获取坐标，转为数字类型
const latitude = parseFloat(document.getElementById('lat').textContent);
const longitude = parseFloat(document.getElementById('lon').textContent);
const btn = document.getElementById('create_route');

// 创建地图配置
const mapOptions = {
    center: [latitude, longitude],
    zoom: 18,
    zoomControl: true,
    zoomAnimation: true,
}
  
// 初始化地图
const map = new L.map('map', mapOptions);
const layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
});
map.addLayer(layer);
L.marker([latitude, longitude]).addTo(map);

// 绑定按钮点击事件
btn.addEventListener("click", function(e){
    // 移除已存在的路由控件，避免重复添加
    const existingRouting = document.getElementById('routing-control');
    if (existingRouting) {
        map.removeControl(existingRouting);
    }

    // 定位成功回调
    function success(pos) {
        const crd = pos.coords;
        const routingControl = L.Routing.control({
            waypoints: [
                L.latLng(latitude, longitude),
                L.latLng(crd.latitude, crd.longitude)
            ],
            autoRoute: true,
            routeWhileDragging: true
        }).addTo(map);
        routingControl._container.id = 'routing-control';
    }

    // 定位失败回调
    function error(err) {
        console.warn(`定位错误(${err.code}): ${err.message}`);
        alert('无法获取你的位置，请检查定位权限');
    }

    navigator.geolocation.getCurrentPosition(success, error);
});

额外优化建议 #

1. 更换全球覆盖的路由服务
   若需要支持全球范围的路由，可替换为Mapbox Directions等服务，需在路由控件中指定serviceUrl并配置密钥：

   L.Routing.control({
       serviceUrl: 'https://api.mapbox.com/directions/v5/mapbox/driving',
       router: L.Routing.mapbox('你的Mapbox密钥'),
       // 其他配置...
   })
   

2. 测试有效坐标
   若仅用于测试，可使用OSRM覆盖范围内的坐标，比如：

   • 目标地点：纽约（40.7128, -74.0060）
   • 用户位置：布鲁克林（40.6782, -73.9442）

3. 检查定位权限
   确保浏览器已开启定位权限，否则navigator.geolocation无法获取用户位置。

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