百度地图如何绘制小车实时轨迹并且车头的刷新
1、首先,我来总体介绍一下如何实现,既然百度路书搞不定那么只能自己想办法,怎么做呢,当然是通过覆盖物加上marker,线路使用覆盖物类型为Polyline进行绘制,小车使用marker进行标注。那么车头的问题怎么解决呢,之前的经验我也已经写了(如何将小车标注在百度地图上并且设置车头方向)可以查看这篇经验;主要还是使用marker中的设置角度的方法se't首先,我来总体介绍一下如何实现,既然百度路书搞不定那么只能自己想办法,怎么做呢,当然是通过覆盖物加上marker,线路使用覆盖物类型为Polyline进行绘制,小车使用marker进行标注。那么车头的问题怎么解决呢,之前的经验我也已经写了(如何将小车标注在百度地图上并且设置车头方向)可以查看这篇经验;主要还是使用marker中的设置角度的方法setRotation(rotation: Number),一般车载设备都会放回方向信息的,所以这块不用担心。主要涉及到两种不同的场景,一种是历史数据比如昨天的数据,一种是历史数据加上现在的实时数据比如今天的数据
1、第一步:接口获取小车的历史轨迹,然后通过历史轨迹创建线性覆盖物
this.polyline = new BMap.Polyline([new BMap.Point(lng,lat)], PolylineOptions); //创建折线
// 将覆盖物加到地图中
this.map.addOverlay(this.polyline);
2、第二步:创建小车设置方向
let marker = new BMap.Marker(参数)
marker.setRotation(rsRotation);
// 将marker加入到地图中
this.map.addOverlay(marker);
3、第三步,让小车在线路上动起来,思路是使用定时器(模拟)
this.dynamicHistoryTimer = setInterval(() => {
i++;
this.marker.setPosition(
new BMap.Point(historyLine[i].lng, historyLine[i].lat)
);
// 角度转换
this.marker.setRotation(rsRotation);
}, 1000);
下面是借鉴的代码

1、首先,实时数据今天的历史数据加上接下来的实时数据,这里面小车就不用在历史线路上从头开始跑了,直接在新的线路上跑就行了。
获取历史线路并创建线性覆盖物
this.polyline = new BMap.Polyline([new BMap.Point(lng,lat)], PolylineOptions); //创建折线
// 将覆盖物加到地图中
this.map.addOverlay(this.polyline);
2、第二步:创建小车设置方向
let marker = new BMap.Marker(参数)
marker.setRotation(rsRotation);
// 将marker加入到地图中
this.map.addOverlay(marker);
3、第三步,让小车沿着实时轨迹走
主要使用的是获取覆盖物路径的方法和设置路径的方法getpath和setpath
this.polyline.setPath(
this.polyline
.getPath()
.concat([new BMap.Point(currentPosi.lng, currentPosi.lat)])
);
主要代码可以参照图片



