如何使用Google Distance Matrix API获取最短路径并完成路线绘制

现有代码问题排查 #

• 你配置了drivingOptions参数并指定了trafficModel，该配置会触发路况计算，不符合你不计算路况的需求，直接删除该配置项即可。
• 默认Directions API仅返回1条路线，无法做多路线对比，需要在请求参数中新增provideRouteAlternatives: true开启多路线返回。
• 现有遍历逻辑存在错误：固定读取第一条路线response.routes[0]的腿段数据，没有遍历所有可选路线计算总距离，也没有筛选出最短路线再传给渲染器。
• Distance Matrix服务仅返回起止点的距离/时长数值，不包含路线绘制所需的几何路径数据，无法满足绘制路线的需求，使用Directions API是正确选择，无需再尝试适配Distance Matrix。

修正后代码示例 #

// 初始化最短路径索引、最短距离变量
let shortestRouteIndex = 0;
let minTotalDistance = Infinity;

directionsService.route({
    origin: document.getElementById("start").value,
    destination: document.getElementById("end").value,
    travelMode: "DRIVING",
    unitSystem: google.maps.UnitSystem.METRIC,
    // 开启返回多条可选路线
    provideRouteAlternatives: true
})
.then((response) => {
    // 遍历所有返回的路线，计算总距离
    for (let i = 0; i < response.routes.length; i++) {
        let currentRouteTotalDistance = 0;
        // 累加当前路线所有腿段的距离（适配有途经点的场景，无途经点时legs长度为1）
        for (let j = 0; j < response.routes[i].legs.length; j++) {
            currentRouteTotalDistance += response.routes[i].legs[j].distance.value;
        }
        // 对比更新最短路线
        if (currentRouteTotalDistance < minTotalDistance) {
            minTotalDistance = currentRouteTotalDistance;
            shortestRouteIndex = i;
        }
    }
    // 手动指定渲染最短路线
    directionsRenderer.setDirections({
        routes: [response.routes[shortestRouteIndex]]
    });
})

额外注意事项 #

• 开启provideRouteAlternatives后接口最多返回3条可选路线，是谷歌接口的上限。
• 无途经点的场景下可以简化逻辑，直接取单条路线的legs[0].distance.value作为总距离即可，无需嵌套循环。

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