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

本文主要是介绍百度地图jsAPI实时画出运行轨迹，车头实时指向行驶方向，设置角度偏移，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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.routemapInit.addOverlay(carMk);               // 将标注添加到地图中carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画}
}

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