js使用百度地图api绘制单、多线路

代码如下
1.实例化Bmap

let map = new BMap.Map("allmap", {
                        mapType: BMAP_HYBRID_MAP
                    }); // 创建Map实例
                    map.centerAndZoom(new BMap.Point('这里写经度','这里写纬度'), 11); // 初始化地图,设置中心点坐标和地图级别
                    map.addControl(new BMap.ScaleControl()); //添加左下方比例尺控件
                    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                    map.addControl(new BMap.NavigationControl(
                        {
                            anchor: BMAP_ANCHOR_TOP_RIGHT,
                            type: BMAP_NAVIGATION_CONTROL_ZOOM//显示完整的平移缩放空间
                        }
                    ));
             
    //请求获取所有路线 ... 我得到的数据为carList 给进方法入参
    toFillData(carList);

2.绘制多条线路（多条一起展示）

function toFillData(infoArr) {
	 map.clearOverlays();
                            let obj = {}
                            let driviObj = {}
                            let arr = []
                            // 过滤空的路线
                            infoArr = infoArr.filter(item => {
                                if (item.logisticsInfo != null && item.logisticsInfo.length > 0) {
                                    return item
                                }
                            })
                            for (let i = 0; i < infoArr.length; i++) {
                                //起始地
                                obj['start' + i] = new BMap.Point(Number(infoArr[i].logisticsInfo[0].lnt), Number(infoArr[i].logisticsInfo[0].lat));
                                obj['end' + i] = new BMap.Point(Number(infoArr[i].logisticsInfo[infoArr[i].logisticsInfo.length - 1].lnt), Number(infoArr[i].logisticsInfo[infoArr[i].logisticsInfo.length - 1].lat));

                                //行车路线规划实例
                                driviObj[i] = new BMap.DrivingRoute(map, {
                                    renderOptions: {map: map, autoViewport: false}, onPolylinesSet: function (Route) {
                                        //当线条添加完成时调用
                                        for (let k = 0; k < Route.length; k++) {
                                            var polyline = Route[k].getPolyline();//获取线条遮挡物
                                            polyline.setStrokeColor("#38CA69");//设置颜色
                                            polyline.setStrokeWeight(5);//设置宽度
                                            polyline.setStrokeOpacity(1);//设置透明度
                                        }
                                        console.log(Route);
                                    }, onMarkersSet: function (routes) {
                                        //当地图标记添加完成时调用
                                        for (let h = 0; h < routes.length; h++) {
                                            //判断是否是途经点
                                            if (typeof (routes[h].Km) == "undefined") {
                                            } else {
                                                map.removeOverlay(routes[h].Km); //删除途经默认图标
                                            }
                                        }
                                    }
                                });


                                arr.push({
                                    key: i,
                                    middle: []
                                })
                                for (let j = 1; j < infoArr[i].logisticsInfo.length - 1; j++) {
                                    if (i == arr[i].key) {
                                        arr[i].middle.push(new BMap.Point(Number(infoArr[i].logisticsInfo[j].lnt), Number(infoArr[i].logisticsInfo[j].lat)))
                                    }
                                }
                                // console.log(obj)
                                // console.log(driviObj)
                                // console.log(arr)
                                driviObj[i].search(obj['start' + i], obj['end' + i], {waypoints: arr[i].middle});  //waypoints表示途经点
                                // driviObj[i].enableAutoViewport();//自动调整层级
}

3.绘制单条线路（使用场景：点击该数据展示该数据线路，传ID请求得到经纬度）

                            let realArr = null
                            $.ajax({
                                type: "get",
                                url: "url",
                                data: {id: id},
                                async: false,
                                success: function (res) {
                                    realArr = res
                                }
                            })
                            if (realArr.logisticsInfo == null || realArr.logisticsInfo.length <= 0) {
                                alert('此处暂无路线！')
                                return
                            }
                            map.clearOverlays();
                            // 正常路线
                            let normalR = realArr.logisticsInfo
                            let normalStart = new BMap.Point(Number(normalR[0].lnt), Number(normalR[0].lat));
                            let normalEnd = new BMap.Point(Number(normalR[normalR.length - 1].lnt), Number(normalR[normalR.length - 1].lat));
                            let normalDriving = new BMap.DrivingRoute(map, {
                                renderOptions: {map: map, autoViewport: true}, onPolylinesSet: function (Route) {
                                    //当线条添加完成时调用
                                    for (let k = 0; k < Route.length; k++) {
                                        var polyline = Route[k].getPolyline();//获取线条遮挡物
                                        polyline.setStrokeColor("#38CA69");//设置颜色
                                        polyline.setStrokeWeight(5);//设置宽度
                                        polyline.setStrokeOpacity(1);//设置透明度
                                    }
                                    console.log(Route);
                                }, onMarkersSet: function (routes) {
                                    //当地图标记添加完成时调用
                                    for (let h = 0; h < routes.length; h++) {
                                        //判断是否是途经点
                                        if (typeof (routes[h].Km) == "undefined") {
                                        } else {
                                            map.removeOverlay(routes[h].Km); //删除途经默认图标
                                        }
                                    }
                                }
                            });


                            if (realArr.logisticsStopInfo != null && realArr.logisticsStopInfo.length > 0) {
                                let obj = {}
                                let driviObj = {}
                                let arr = []
                                // 过滤空的路线
                                let stopArr = realArr.logisticsStopInfo
                                for (let i = 0; i < stopArr.length; i++) {
                                    //起始地
                                    obj['start' + i] = new BMap.Point(Number(stopArr[i].value[0].lnt), Number(stopArr[i].value[0].lat));
                                    obj['end' + i] = new BMap.Point(Number(stopArr[i].value[stopArr[i].value.length - 1].lnt), Number(stopArr[i].value[stopArr[i].value.length - 1].lat));
                                    //行车路线规划实例
                                    driviObj[i] = new BMap.DrivingRoute(map, {
                                        renderOptions: {map: map, autoViewport: true},
                                        onPolylinesSet: function (Route) {
                                            //当线条添加完成时调用
                                            for (let k = 0; k < Route.length; k++) {
                                                var polyline = Route[k].getPolyline();//获取线条遮挡物
                                                polyline.setStrokeColor("red");//设置颜色
                                                polyline.setStrokeWeight(5);//设置宽度
                                                polyline.setStrokeOpacity(8);//设置透明度
                                            }
                                            console.log(Route);
                                        },
                                        onMarkersSet: function (routes) {
                                            //当地图标记添加完成时调用
                                            for (let h = 0; h < routes.length; h++) {
                                                //判断是否是途经点
                                                if (typeof (routes[h].Km) == "undefined") {
                                                } else {
                                                    map.removeOverlay(routes[h].Km); //删除途经默认图标
                                                }
                                            }
                                        }
                                    });

                                    arr.push({
                                        key: i,
                                        middle: []
                                    })
                                    for (let j = 1; j < stopArr[i].value.length - 1; j++) {
                                        if (i == arr[i].key) {
                                            arr[i].middle.push(new BMap.Point(Number(stopArr[i].value[j].lnt), Number(stopArr[i].value[j].lat)))
                                        }
                                    }
                                    // console.log(obj)
                                    // console.log(driviObj)
                                    // console.log(arr)
                                    driviObj[i].search(obj['start' + i], obj['end' + i], {waypoints: arr[i].middle});  //waypoints表示途经点
                                    driviObj[i].disableAutoViewport()

                                }
                            }


                            let normalArr = []

                            for (let i = 1; i < normalR.length - 1; i++) {

                                normalArr.push(new BMap.Point(Number(normalR[i].lnt), Number(normalR[i].lat)))
                            }



                            normalDriving.search(normalStart, normalEnd, {waypoints: normalArr});

                            setTimeout(() => {
                                map.centerAndZoom(normalStart, 12);
                            },500)