百度地图jsAPI实时画出运行轨迹，车头实时指向行驶方向，设置角度偏移

最新推荐文章于 2026-03-06 01:59:51 发布

原创最新推荐文章于 2026-03-06 01:59:51 发布 · 2.9w 阅读

83 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#百度地图js #实时运行轨迹 #setRotation角度偏移 #车头行径方向

百度地图专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用百度地图API实现实时车辆轨迹绘制，并确保车辆图标的方向与行驶方向一致。文章详细展示了从地图构建到数据处理及动态图标更新的具体步骤。

背景：公司想要做一个基于百度地图实时展示车的运行轨迹，且在运行过程中需要车头方向随着角度进行变化。

1.先把地图构建出来，然后造一组数据用以画线。

数据格式为：

var PointArr = [ {long:	117.128937	,lat:	36.676339	,route:	30	}]

2.在地图上添加起始点图标，选用数组的第一个对象的经纬度进行定位展示。

addMarker(new BMap.Point(PointArr[0].long, PointArr[0].lat),'起点',map,PointArr);
//调用方法具体为
 function addMarker(point, name,mapInit,trackUnit) {
    if(name=="起点"){
        var myIcon = new BMap.Icon("css/img/startMap.svg", new BMap.Size(45,45),{
            anchor: new BMap.Size(20, 45)//这句表示图片相对于所加的点的位置mapStart
            // offset: new BMap.Size(-10, 45), // 指定定位位置
            // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
        });
        var marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
        mapInit.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    }
}

3.这么多数据想让他展示实时画线的效果，首先是将这些数组一秒钟取出一个，具体几秒根据项目时间需要设置。然后将这些值存储到一个新的数组里面，通过这些数组拿出前后两个值进行画线。

var carMk;//先将终点坐标展示的mark对象定义
var myIcon2 = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),
    {anchor : new BMap.Size(27, 13)});//初始化终点坐标图标
var temporary=[];//定义中间新取出的值放到一个新的数组里面
var i = 0;
var interval = setInterval(function () {
    if (i >= PointArr.length) {
        clearInterval(interval);
        return;
    }
    console.log(PointArr[i]);
    i = i + 1;
    temporary.push(PointArr[i]);
    console.log(temporary);
    drowLine(map,temporary);//画线调用
}, 1000);

每一秒画一次线的方法调用：

function drowLine(map,temporary) {
    if(temporary && temporary.length>1){//判断数值为两个点时开始进行绘制
        for(var i=0;i<temporary.length-1;i++){
            var polyline22 = new BMap.Polyline(
                [
                    new BMap.Point(temporary[i].long, temporary[i].lat),
                    new BMap.Point(temporary[i+1].long, temporary[i+1].lat)
                ],
                {strokeColor:"red",
                    strokeWeight:7,
                    strokeOpacity:1
                });   //创建折线
            map.addOverlay(polyline22);
            addMarkerEnd(new BMap.Point(temporary[i+1].long,temporary[i+1].lat),'终点',map,temporary[i+1]);//添加图标
        }
    }
}

这个时候会遇到每次结束的点图标不清楚，每一次都会画上一个，最后导致页面中很多最后的图标，简直不能直视。解决方法是在画下一次图标时候先将前一个图标清除调，但是

removeOverlay这个方法放在哪儿都会报找不到图标的错误，于是解决方法如下：

function addMarkerEnd(point, name,mapInit,trackUnit) {
   if(name=="终点"){
        if(carMk){//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
            mapInit.removeOverlay(carMk);
        }
        carMk = new BMap.Marker(point,{icon:myIcon2});  // 创建标注
       carMk.setRotation(trackUnit.route);//trackUnit.route
        mapInit.addOverlay(carMk);               // 将标注添加到地图中
        carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    }
}

好啦，最终实现的效果就是小车可以在地图上实时进行移动，且车头方向根据值进行变化