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

最新推荐文章于 2025-09-16 12:43:30 发布

原创

最新推荐文章于 2025-09-16 12:43:30 发布 · 3.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客介绍了如何利用BMap JavaScript API在地图上绘制多条行车路线，并展示了在接收到特定ID时如何高亮显示某一条路线的详细步骤。内容包括实例化地图、设置地图控件、请求路线数据、过滤无效路线、绘制多条线路以及绘制单条线路的实现方法。

代码如下
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