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

这篇博客介绍了如何利用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
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值