百度地图如何绘制小车实时轨迹并且车头的刷新

2026-03-02 16:56:00

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)])

);

主要代码可以参照图片

百度地图如何绘制小车实时轨迹并且车头的刷新

百度地图如何绘制小车实时轨迹并且车头的刷新

百度地图如何绘制小车实时轨迹并且车头的刷新

百度地图如何绘制小车实时轨迹并且车头的刷新

猜你喜欢