Leaflet Routing Machine获取totalDistance属性为undefined问题求解

• 回调函数内this指向错误：routesfound事件回调中的this指向L.Routing.control控件实例，该实例本身没有summary属性，直接访问this.summary会返回undefined，进而触发读取totalDistance的类型错误。
• 属性路径获取错误：路由的总距离等汇总信息不挂载在控件实例上，而是存储在事件回调参数e的routes数组中，数组的每一项对应一条计算完成的路线，每一项的summary属性下才包含totalDistance、totalTime等汇总字段。

直接修改routesfound事件的回调逻辑，从事件参数中读取对应的路由信息即可，修复后的代码如下：

function createRoute(id, coords) {
    // 建议加let声明route变量，避免污染全局作用域
    let route = L.Routing.control({
        name: id,
        serviceUrl: 'http://router.project-osrm.org/route/v1',
        //router: L.Routing.graphHopper('apiKey');
        waypoints: coords,
        addWaypoints: false,
        draggableWaypoints: false,
        show: false,
    }).on('routesfound', function(e) {
        // 先判断返回的路由数组非空，避免极端场景报错
        if (e.routes && e.routes.length > 0) {
            const totalDistance = e.routes[0].summary.totalDistance;
            console.log('路线总距离：', totalDistance);
            // 其他业务逻辑
        }
    }).addTo(map);
}

如果需要对外暴露路线长度，建议根据业务场景调整变量声明的作用域，不要直接使用未声明的全局变量。

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