如何在Web应用中打开带多个途经点的Google Maps路线？

你当前使用的search路径仅支持单个地点搜索，要生成包含多个地点的规划路线，需改用Google Maps的路线专属URL规则：

• URL路径修改为dir而非search
• 多个地点按照起点/途经点/终点的顺序用斜杠/拼接在dir后即可

修改后的完整代码 #

JS逻辑代码 #

$(document).on('click', 'button', function () {
    const location = "Empire state building"
    const location2 = "Washington square park"
    // 路线URL格式：/dir/第一个地点/第二个地点/，更多地点可继续向后用/拼接
    var url = `https://www.google.com.sa/maps/dir/${location}/${location2}/?hl=en`
    window.open(url, '_blank');
});

HTML代码（原有逻辑无需修改） #

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<button>OPEN GOOGLE MAPS</button>
</body>
</html>

如果需要添加更多途径站点，直接在${location2}后继续用/拼接新的地点变量即可，比如三个站点的格式为/dir/${loc1}/${loc2}/${loc3}/?hl=en，Google Maps会自动按你填写的顺序生成行驶/步行/公共交通路线。

注意：如果你的地点参数包含空格、特殊符号或非英文内容，建议用encodeURIComponent()包裹地点变量做URL编码，避免出现解析异常，示例：${encodeURIComponent(location)}

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