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 });});
},

效果图如下：

如有错误或不足，欢迎各位大佬评论指正。

vue百度地图驾车路线修改路径颜色，每条路径颜色不一样相关推荐

高德(百度)地图驾车路线规划和清除
高德地图: 带途径点的路径规划: var markerList=[{lng:116.379028,lat:39.865042},{lng:116.379028,lat:39.885042, },{ln ...
vue百度地图实现路线规划（含途经点）
页面展示:设置驾车路线途经点 <html><head><meta http-equiv="Content-Type" content="te ...
android集成百度地图驾车路线规划并在地图上绘制出路线
1. 设置路线规划监听 mSearch.setOnGetRoutePlanResultListener(getRoutePlanListener);//设置路线规划监听 2.初始化路线监听器 /*路 ...
2019-详细Android Studio开发百度地图(4)—百度地图_路线规划的实现
百度地图_路线规划的实现前言从小白一步步开始,很多资源是很久以前的,而且没有操作配套截图和资源分享.现在本踩过了很多坑,现在开发完成后决定重新写一份教程,希望能借此帮助到许多其他有这方面需求的人. ...
百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式当修改到心仪的样式时,点击生成JSON,就会 ...
百度地图驾车/公交查询Demo（支持多起点多终点）
2019独角兽企业重金招聘Python工程师标准>>> 效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
vue + 百度地图
之所以写这篇博客,是因为我发现了神器,并且很好用,同时也被困扰了很长时间,所以希望遇到的小伙伴可以迎刃而解. 一步步来吧! 1.安装地图 npm install vue-baidu-map 2.在ma ...
vue 百度地图 + 定位
vue 百度地图 + 定位 > 前提需要自己有百度的密钥,如没有可以去百度地图申请一.在主目录下的index.html引入js,例如: 二.在webpack.base.conf.js配置文件中 ...
uniapp--腾讯地图驾车路线规划
腾讯地图驾车路线规划 <template><view class=""><cu-custom bgColor="bg-gradual-blu ...

vue百度地图驾车路线修改路径颜色，每条路径颜色不一样

vue百度地图驾车路线修改路径颜色，每条路径颜色不一样相关推荐

最新文章

热门文章

vue百度地图 驾车路线修改路径颜色，每条路径颜色不一样

vue百度地图 驾车路线修改路径颜色，每条路径颜色不一样相关推荐

最新文章

热门文章

vue百度地图驾车路线修改路径颜色，每条路径颜色不一样

vue百度地图驾车路线修改路径颜色，每条路径颜色不一样相关推荐