vue百度地图 驾车路线修改路径颜色,每条路径颜色不一样
百度地图实现驾车路线,并修改每条路线的颜色;
·
百度地图实现驾车路线,并修改每条路线的颜色;
下面有两种方法,写其中一个即可;
colorList:存放路线颜色
drawMap () {
let BMap = this.BMap;
let map = this.map;
let start = {}; // 起点;
let end = {}; // 终点;
let waypoints = []; // 途经点;
let _this = this;
this.mapList.forEach((item, index) => {
start = new BMap.Point(item.start.lng, item.start.lat); // 起点
end = new BMap.Point(item.end.lng, item.end.lat); // 终点
item.waypoints.forEach(it => {
waypoints.push(new BMap.Point(it.lng, it.lat)); // 途经点
});
map.addOverlay(start); // 起点添加到地图
map.addOverlay(end); // 终点添加到地图
let driving = new BMap.DrivingRoute(map, {
renderOptions: { map: map, autoViewport: true },
onPolylinesSet (routes) {
// let searchRoute = routes[0].getPolyline(); // 导航路线
// map.addOverlay(searchRoute);
// 修改路线样式
// 方法一:
for (let i = 0; i < routes.length; i++) {
let polyline = routes[i].getPolyline(); // 获取线条遮挡物
polyline.setStrokeColor(_this.colorList[index].lineColor); // 设置路线颜色
polyline.setStrokeWeight(8); // 设置路线宽度
polyline.setStrokeOpacity(1); // 设置路线透明度
}
},
onMarkersSet (routes) {
// map.removeOverlay(routes[0].marker); // 删除起点
// map.removeOverlay(routes[routes.length - 1].marker); // 删除终点
// map.clearOverlays();
}
});
// 方法二:
// 设置检索结束后的回调函数
driving.setSearchCompleteCallback(function () {
// getResults():最近一次检索的结果; getPlan(0):索引0表示第一条方案;
let plan = driving.getResults().getPlan(0);
// getNumRoutes():方案包含的线路的个数
for (let i = 0; i < plan.getNumRoutes(); i++) {
let path = plan.getRoute(i).getPath();
let polyline = new BMap.Polyline(path, { strokeColor: _this.colorList[index].lineColor, strokeWeight: 8, strokeOpacity: 1 });
map.addOverlay(polyline);
}
});
driving.search(start, end, { waypoints: waypoints });
});
},
效果图如下:
如有错误或不足,欢迎各位大佬评论指正。
更多推荐
已为社区贡献3条内容
所有评论(0)