百度地图JS API 3.0驾车路线规划：如何获取多条路线？
在使用百度地图JS API 3.0进行驾车路线规划时，默认情况下只会返回一条推荐路线。但在实际应用中，我们经常需要为用户提供多种路线选择。本文将详细介绍如何通过百度地图JS API 3.0获取多条驾车路线。
一、基础准备
在开始之前，请确保您已经完成以下准备工作：
- 申请百度地图开发者密钥（AK）
- 引入百度地图JS API脚本
- 创建地图容器并初始化地图
以下是基础的HTML结构和API引入代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图多路线规划</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<style>
#mapContainer { width: 100%; height: 500px; }
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>二、核心实现方法
要获取多条路线，关键在于设置路线规划的policy参数。百度地图API提供了多种路线策略，通过设置不同的策略可以获取不同的路线方案。
2.1 路线策略常量
常用的驾车路线策略包括：
| 策略常量 | 说明 |
|---|---|
| BMAP_DRIVING_POLICY_LEAST_TIME | 最少时间 |
| BMAP_DRIVING_POLICY_LEAST_FEE | 最少费用 |
| BMAP_DRIVING_POLICY_LEAST_DISTANCE | 最短距离 |
| BMAP_DRIVING_POLICY_AVOID_HIGHWAYS | 避开高速 |
| BMAP_DRIVING_POLICY_AVOID_TOLLS | 避开收费 |
2.2 实现多路线查询
通过循环不同的路线策略，可以多次调用路线规划服务，从而获取多条路线：
// 初始化地图
var map = new BMap.Map("mapContainer");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
// 定义起点和终点
var startPoint = new BMap.Point(116.301934, 39.977552); // 北京天安门
var endPoint = new BMap.Point(116.508328, 39.919141); // 北京首都机场
// 定义不同的路线策略
var policies = [
BMAP_DRIVING_POLICY_LEAST_TIME,
BMAP_DRIVING_POLICY_LEAST_DISTANCE,
BMAP_DRIVING_POLICY_AVOID_HIGHWAYS,
BMAP_DRIVING_POLICY_AVOID_TOLLS
];
// 存储所有路线
var allRoutes = [];
// 遍历策略，获取多条路线
for (var i = 0; i < policies.length; i++) {
var driving = new BMap.DrivingRoute(map, {
renderOptions: { map: map, autoViewport: false },
policy: policies[i]
});
// 保存当前索引用于闭包
(function(index) {
driving.search(startPoint, endPoint, function(result) {
// 将路线添加到数组
allRoutes[index] = result;
// 可以在这里处理每条路线的信息
console.log("路线" + (index + 1) + "规划完成");
// 如果是最后一条路线，可以进行汇总处理
if (index === policies.length - 1) {
processAllRoutes(allRoutes);
}
});
})(i);
}
// 处理所有路线结果的函数
function processAllRoutes(routes) {
for (var i = 0; i < routes.length; i++) {
if (routes[i]) {
var route = routes[i].getPlan().getRoute(0);
var distance = route.getDistance();
var duration = route.getDuration();
console.log("路线" + (i + 1) + ": 距离=" + distance + "米, 时间=" + duration + "秒");
}
}
}三、优化与注意事项
3.1 避免重复绘制
上面的代码会在地图上绘制所有路线，可能导致地图显示混乱。可以通过以下方式优化：
// 只显示第一条路线，其他路线隐藏
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: false,
panel: "routePanel" // 指定路线导航面板
},
policy: policies[i],
onSearchComplete: function(results) {
if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
// 如果不是第一条路线，清除地图上的覆盖物
if (i > 0) {
map.clearOverlays();
// 重新添加第一条路线
addFirstRouteToMap();
}
}
}
});3.2 错误处理
在实际应用中，需要添加错误处理机制：
driving.search(startPoint, endPoint, function(result) {
if (driving.getStatus() !== BMAP_STATUS_SUCCESS) {
console.error("路线规划失败: ", driving.getStatus());
return;
}
// 处理成功结果...
});3.3 性能考虑
- 同时发起多个路线请求可能会增加服务器负载和客户端等待时间
- 可以考虑使用setTimeout延迟发送后续请求，避免浏览器并发限制
- 对于移动端应用，要注意控制请求数量以节省流量
四、完整示例
以下是一个完整的多路线规划示例，包含用户界面和控制逻辑：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多路线规划示例</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<style>
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
#container { display: flex; height: 600px; }
#mapContainer { flex: 2; height: 100%; }
#controlPanel { flex: 1; padding: 10px; background: #f5f5f5; overflow-y: auto; }
.route-item { padding: 10px; margin: 5px 0; background: white; cursor: pointer; border-radius: 4px; }
.route-item:hover { background: #e9e9e9; }
.route-info { font-size: 12px; color: #666; }
</style>
</head>
<body>
<div id="container">
<div id="mapContainer"></div>
<div id="controlPanel">
<h3>路线选择</h3>
<div id="routeList"></div>
</div>
</div>
<script>
var map = new BMap.Map("mapContainer");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
var startPoint = new BMap.Point(116.301934, 39.977552);
var endPoint = new BMap.Point(116.508328, 39.919141);
var policies = [
{ name: "最少时间", value: BMAP_DRIVING_POLICY_LEAST_TIME },
{ name: "最短距离", value: BMAP_DRIVING_POLICY_LEAST_DISTANCE },
{ name: "避开高速", value: BMAP_DRIVING_POLICY_AVOID_HIGHWAYS },
{ name: "避开收费", value: BMAP_DRIVING_POLICY_AVOID_TOLLS }
];
var routes = [];
var routeOverlays = [];
// 初始化路线列表
function initRouteList() {
var routeList = document.getElementById("routeList");
for (var i = 0; i < policies.length; i++) {
var item = document.createElement("div");
item.className = "route-item";
item.innerHTML = "<strong>" + policies[i].name + "</strong><div class='route-info'>加载中...</div>";
item.onclick = createRouteClickHandler(i);
routeList.appendChild(item);
}
}
// 创建路线点击处理器
function createRouteClickHandler(index) {
return function() {
highlightRoute(index);
};
}
// 高亮选中的路线
function highlightRoute(index) {
// 清除所有覆盖物
map.clearOverlays();
// 重新绘制选中的路线
if (routes[index]) {
var route = routes[index].getPlan().getRoute(0);
var polyline = new BMap.Polyline(route.getPath(), {
strokeColor: "blue",
strokeWeight: 5,
strokeOpacity: 0.7
});
map.addOverlay(polyline);
// 调整视野
map.setViewport([startPoint, endPoint]);
}
}
// 开始多路线规划
function startMultiRoutePlanning() {
for (var i = 0; i < policies.length; i++) {
planSingleRoute(i);
}
}
// 规划单条路线
function planSingleRoute(index) {
var driving = new BMap.DrivingRoute(map, {
policy: policies[index].value,
onSearchComplete: function(results) {
if (driving.getStatus() === BMAP_STATUS_SUCCESS) {
routes[index] = results;
// 更新路线信息
var route = results.getPlan().getRoute(0);
var distance = (route.getDistance() / 1000).toFixed(1);
var duration = Math.ceil(route.getDuration() / 60);
var routeInfo = document.querySelectorAll(".route-item")[index];
routeInfo.innerHTML = "<strong>" + policies[index].name + "</strong><div class='route-info'>距离: " + distance + "公里 | 时间: " + duration + "分钟</div>";
// 默认选中第一条路线
if (index === 0) {
highlightRoute(0);
}
} else {
var routeInfo = document.querySelectorAll(".route-item")[index];
routeInfo.innerHTML = "<strong>" + policies[index].name + "</strong><div class='route-info' style='color:red'>规划失败</div>";
}
}
});
driving.search(startPoint, endPoint);
}
// 页面加载完成后初始化
window.onload = function() {
initRouteList();
startMultiRoutePlanning();
};
</script>
</body>
</html>五、总结
通过本文的介绍，我们了解了如何使用百度地图JS API 3.0获取多条驾车路线。关键要点包括：
- 使用不同的路线策略常量来获取多样化的路线方案
- 通过循环调用路线规划服务实现多路线查询
- 合理处理路线结果的显示和用户交互
- 注意性能优化和错误处理
这种方法可以为用户提供更多的路线选择，提升应用的实用性和用户体验。在实际应用中，还可以根据具体需求进一步定制路线策略和结果显示方式。