本次依然是关于百度地图中常见的一个问题，此次共使用了两种方式并做了一些分析及处理，希望有所帮助。如有问题可以评论或私信。

一、便捷方式

优点：便捷，所用的api方法是根据坐标进行计算后绘制路线，所以路线相对准确。

缺点：当坐标点多于10个之后，无法加载出来(即坐标过多无法使用)。

1.api文档

百度地图JSAPI 2.0类参考 (baidu.com)

2.部分代码(主要部分是driving.search中所传递的参数)

// start：起点坐标 end：终点坐标 way：途经点坐标数组
driving.search(start, end, {
    waypoints: way,
});

3.全部代码

function init() {
    // 地图初始化部分
    // DOM元素记得修改
    let map = new BMap.Map("allmap");
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(116.385306, 39.884902), 19)
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true)
    // 初始化结束

    // 多个坐标(模拟数据)
    var path = [
        { lng: 116.385306, lat: 39.884902 },
        { lng: 116.408675, lat: 39.87078 },
        { lng: 116.410723, lat: 39.868717 },
        { lng: 116.412641, lat: 39.866834 },
        { lng: 116.424907, lat: 39.863241 }
    ];
    // 创建路线实例化
    var driving = new BMap.DrivingRouteLine(map, {
        renderOptions: {
            map: map
        }
    })
    // 设置起点、终点和途经点数组
    var start = new BMap.Point(path[0].lng, path[0].lat);
    var end = new BMap.Point(path[path.length - 1].lng, path[path.length - 1].lat);
    var way = []
    path.map((item, index) => {
        if (index != 0 && index != path.length - 1) {
            way.push(new BMap.Point(item.lng, item.lat))
        }
    })
    driving.search(start, end, {
        waypoints: way,
    });
}

二、复杂方式（由于最终使用了本方案，所以同时配备了弹框信息的处理）

优点：解决了点坐标过多问题

缺点：绘制路线准确度较差

1.实现思路，由于点坐标过多，或者说多的太多了，于是拿到坐标数组后，先添加点标记，然后两点标记之间连线。

如果点与点之间比较近或者说点比较密集可以使用此方法

2.代码

// 初始化地图
let BMap
let map = ref()
function init() {
    // 初始化内容省略
    BMap = window.BMap; 
    map.value = new BMap.Map("allmap", { enableMapClick: false }); 
    //初始显示
    map.value.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5); 
    // 添加滚轮效果
    map.value.enableScrollWheelZoom(true);
    // 模拟数据
    var path = [
        { lng: 116.385306, lat: 39.884902 },
        { lng: 116.408675, lat: 39.87078 },
        { lng: 116.410723, lat: 39.868717 },
        { lng: 116.412641, lat: 39.866834 },
        { lng: 116.424907, lat: 39.863241 }
    ];
    
    // 插入点坐标
    initData(path)
}

// 初始化数据
function initData(data) {
    // 判断是否为空数组
    if (data.length > 0){
        var list = []
        var start = new BMap.Ponit(data[0].lng, data[0].lat)
        // 如果数组中的数据大于1个则绘制线路
        if (data.length != 1) {
            data.map((item, index) => {
                // 把途经点放入数组(即不是重点和起点的坐标)
                if (index != 0 && index != data.length - 1) {
                    list.push(new BMap.Ponit(item.lng, item.lat)
                }
            })
            var end =new BMap.Ponit(data[data.length - 1].lng, data[data.length - 1].lat)
            // 绘制线路
            drawLine(start, end, list)
        }
        // 添加弹框和点标记
        addPopPoint(start, end, list)
    }
}

// 绘制线路
function drawLine(start, end, list) {
    // 绘制线路所需要的参数为一个数组，所以又需要将三个参数放入一块
    var lineArr = []
    lineArr.push(start)
    if (list.length > 0) {
        list.map(item => {
            lineArr.push(item)
        })
    }
    lineArr.push(end)
    // 折线样式
    var sy = new BMap.Symbol(window.BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.6,// 图标缩放大小
        strokeColor: '#fff',// 设置矢量图标的线填充颜色
        strokeWeight: '2',// 设置线宽
    });
    var icons = new BMap.IconSequence(sy, '100%', '10%', false);
    var polyline = new BMap.Polyline(lineArr, {
        enableEditing: false,// 是否启用线编辑，默认为false
        enableClicking: false,// 是否响应点击事件，默认为true
        icons: [icons],
        strokeWeight: '6',// 折线的宽度，以像素为单位
        strokeOpacity: 0.8,// 折线的透明度，取值范围0 - 1
        strokeColor: "#18a45b" // 折线颜色
    });
    // 增加折线
    map.value.addOverlay(polyline);
}

// 添加弹框和点标记
function addPopPoint(start, end, list) {
    // 修改可视范围数组
    var pointArr = []
    pointArr.push(start)
    // 弹框大小(可自己修改)
    var opts = {
        width: 250,
        height: 130,
    }
    // 起点终点弹框
    var startIcon = new BMap.Icon("http://api.map.baidu.com/images/dest_markers.png", new BMap.Size(32, 32), {
                anchor: new BMap.Size(18, 30)
    });
    var startMk = new BMap.Marker(start, { icon: startIcon });
    var startInfoWindow = new BMap.InfoWindow(`<p class="markContent">起点</p><p class="content">横坐标：${start.lng}</p><p class="content">纵坐标：${start.lat}</p>`, opts);
    startMk.addEventListener("click", function () {
        map.value.openInfoWindow(startInfoWindow, start); //开启信息窗口
    });
    map.value.addOverlay(startMk);
    if (end) {
        pointArr.push(end)
        var endIcon = new BMap.Icon("http://api.map.baidu.com/images/dest_markers.png", new BMap.Size(32, 32), {
            // 精灵图的偏移
            imageOffset: new BMap.Size(0, -32),
            anchor: new BMap.Size(15, 30)
        });
        var endMk = new BMap.Marker(end, { icon: endIcon });
        var endInfoWindow = new BMap.InfoWindow(`<p class="markContent">终点</p><p class="content">横坐标：${end.lng}</p><p class="content">纵坐标：${end.lat}</p>`, opts);
        endMk.addEventListener("click", function () {
            map.value.openInfoWindow(endInfoWindow, end); //开启信息窗口
        });
        map.value.addOverlay(endMk);
        mapList.map(item => {
            list.push(item)
        })
        list.push(end)
    }
    // 途经点弹框
    if (mapList.length > 0) {
        mapList.map((item, index) => {
            pointArr.push(item)
            var infoWindow = new BMap.InfoWindow(`<p class="markContent">途经点${index + 1}</p><p class="content"><p class="content">横坐标：${item.lng}</p><p class="content">纵坐标：${item.lat}</p>`, opts);
            var marker = new BMap.Marker(item)
            marker.addEventListener("click", function () {
                map.value.openInfoWindow(infoWindow, item); //开启信息窗口
            });
            map.value.addOverlay(marker)
        })
    }
    // 获取合适视野
    const view = map.value.getViewport(list);
    map.value.setViewport(view);
}