如何使用JS和百度地图实现地图路线规划功能

然后，在JS文件中编写创建地图的代码，代码如下：

// 获取地图容器元素
var mapContainer = document.getElementById("map");

// 创建地图实例
var map = new BMap.Map(mapContainer);

// 设置地图中心点和缩放级别
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 12);

这段代码将创建一个地图实例，并将地图中心设置为北京市中心，缩放级别为12。

Codapp 扫码点餐小程序(含H5系统)

Codapp 外卖点餐系统是一款专为快餐店、奶茶店、咖啡店、糕点店等商户打造的移动点餐解决方案，支持自提与外卖两种模式，可快速部署上线使用。 该系统支持微信、支付宝支付，并接入腾讯地图与百度地图，支持第三方配送（如达达）与商家自主配送，助力门店实现智能点单与订单管理。 功能特点： 微信小程序&H5移动端双端点餐：无需下载 App，直接扫码下单 支持多门店管理：一套系统可管理多家门

下载

步骤四：添加路线规划功能
接下来，我们将添加路线规划功能到地图中。百度地图提供了 BMap.DrivingRoute 类来实现路线规划功能。代码如下：

// 创建DrivingRoute实例
var driving = new BMap.DrivingRoute(map);

// 设置起点和终点
var start = new BMap.Point(116.322, 39.983);
var end = new BMap.Point(116.396, 39.902);

// 设置路线规划参数
var opts = {
    policy: BMAP_DRIVING_POLICY_LEAST_TIME
};

// 规划路线
driving.search(start, end, opts);

// 添加路线到地图
driving.setSearchCompleteCallback(function(results){
    if (driving.getStatus() == BMAP_STATUS_SUCCESS){
        var plan = results.getPlan(0);
        map.addOverlay(new BMap.Polyline(plan.getRoute(0).getPath()));
    }
});

以上代码将创建一个 DrivingRoute 实例，并设置起点和终点。通过设置 BMAP_DRIVING_POLICY_LEAST_TIME 参数，可以选择规划路线的策略，默认是最快捷模式。然后使用 search 方法来规划路线。最后，添加一个回调函数来将路线添加到地图中。

步骤五：显示路线信息
如果你想在地图上显示路线的文字描述信息，可以使用 BMap.RouteLine 类。具体代码如下：

// 创建RouteLine实例
var routeLine = new BMap.RouteLine(results.getPlan(0).getRoute(0));

// 添加路线到地图
map.addOverlay(routeLine);

// 显示路线信息
routeLine.setTextIcon({
    policy: 'BMAP_DRIVING_POLICY_LEAST_TIME',
    enableDragging: true,
    lineStroke: 6,
    startMarkerStroke: 2,
    endMarkerStroke: 2
});

通过上述代码，我们可以将路线添加到地图中，并通过 setTextIcon 方法来显示路线的文字描述信息。在显示文字描述时，还可以自定义一些样式参数，比如线条粗细、起点和终点的标记样式等。

到此为止，我们已经完成了使用JS和百度地图实现地图路线规划功能的全部步骤。你可以根据自己的需求对代码进行扩展和调整，实现更加个性化的地图导航功能。希望本文对你有所帮助，祝你实现一次愉快的地图路线规划！