百度地图实现驾车路线,并修改每条路线的颜色;
下面有两种方法,写其中一个即可;
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 });
    });
},

效果图如下:
在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐