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

一、便捷方式

优点：便捷，所用的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,// 是否启用线编辑，默认为falseenableClicking: false,// 是否响应点击事件，默认为trueicons: [icons],strokeWeight: '6',// 折线的宽度，以像素为单位strokeOpacity: 0.8,// 折线的透明度，取值范围0 - 1strokeColor: "#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);
}