百度地图 行车路径规划自定义 起点 终点 路径

已知N个坐标点，用这个点在百度地图上绘制一条行车路线

问题：百度地图为我们提供了 DrivingRoute API，但是提供的api中并没有提供更改路径、起点、终点、经点的样式，如果想让界面看起来舒服一点就需要自己自定义

API DrivingRoute中提供了返回路径规划的路径的path接口，我们可以利用返回的path,

再调用Polyline, 自己绘制一个路径，然后把对应的起终点、经点 绘制就可以实现自定义路路径规划了。

拿到需要的起点、终点、经点的经纬度坐标, 得到对应的point对象，绘制不同类型的marker（起点、经点、终点的自定义）;

let {start, end, path} = params;

let startPoint = new this.BMap.Point(start.lng, start.lat);
let endPoint = new this.BMap.Point(end.lng, end.lat);

drawPoint(startPoint, 'start');
drawPoint(endPoint, 'end');

let pathPoint = [];

if (path.length > 0) {
_ForEach(path, item => {
let _point = new this.BMap.Point(item.lng, item.lat);
pathPoint.push(_point);
drawPoint(_point, 'path');
});
}

// 根据不同的type绘制不同的marker （起点、经点、终点）
function drawPoint(point, type){
let iconUrl = POINT_ICON[type]; // 通过不同的type 拿到对应的marker的icon url

let marker = new BMap.Marker(point, {
icon: new BMap.Icon(iconUrl, new BMap.Size(ICON_SIZE_WIDTH, ICON_SIZE_HEIGHT), {
imageSize: new BMap.Size(ICON_SIZE_WIDTH, ICON_SIZE_HEIGHT)
}),
offset: new BMap.Size(0, -ICON_SIZE_HEIGHT/2)
});

this.map.addOverlay(marker);
}

利用DrivingRoute API 拿到路径的点

let driving = new BMap.DrivingRoute(this.map, {
policy: BMAP_DRIVING_POLICY_LEAST_TIME, // 最短事件
// 路径规划的回调函数 把结果绘制到地图上
onSearchComplete: (result) => {
let plan = result.getPlan(0); // 拿第一个路径规划的结果
let routeNum = plan.getNumRoutes(); // 如果有经点，会分段，全需要绘制

let polylinePoints = [];
for(let i = 1; i <= routeNum; i++){
let pathArr = plan.getRoute(i - 1).getPath();
polylinePoints.push(...pathArr);
}

// 自定义的路径
let polyline = new BMap.Polyline(polylinePoints, {
strokeColor: '#3086f3',
strokeWeight: '4',
strokeOpacity: '.8'
});

this.map.addOverlay(polyline);
}
});

driving.search(startPoint, endPoint, {
waypoints: pathPoint
});