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
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值