百度地图API显示车辆运行轨迹并动画展示

百度地图api 版本：3.0
开发文档：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0

需求描述

项目中，需要根据汽车起点、终点的GPS坐标，来显示出汽车的运行轨迹，并用“会动的小车”动画展示。
首先，因为可能存在拐弯的情况，所以直接用直线连接两个点显然是不可以的；其次，如果使用百度官方示例的方法根据起终点经纬度查询驾车路线也是不可以的，因为这样设置好之后路线和起终点的贴图直接显示在地图上了，然而我们是不想要起终点的贴图的，所以需要自己去实现部分功能。

解决方法

一、显示轨迹

首先html文件中有地图div

<div class="right car_right1" id="map"></div>

js文件初始化地图

map = new BMap.Map("map");    // 创建Map实例

接着我们还是用DrivingRoute类去查询两个点之间的路线，但是不直接画在地图上，而是通过js代码得到路线。其实所谓的路线规划，只不过是一个点比较多的经纬度数组，当这个数组中元素数量较多时，显示在前端就会看到是一段光滑的曲线。示例代码如下，不设置renderOptions属性，路线就不会显示在前端。onSearchComplete属性是设置检索完成后的回调函数，注意这是一个异步操作。

var driving = new BMap.DrivingRoute(map, {onSearchComplete: function (results) {console.log(results.getPlan(0));var points = results.getPlan(0).ik[0].Hr;console.log(points);// ...}});driving.search(point1, point2);

results.getPlan(0)方法会获得搜索到的第一个路线规划，打印在控制台如下，可以猜测图里面的Hr是检索到的路径规划数组（从后面的实践可以证实猜测是对的）

接着把路径数组转换为折线Polyline类的对象，并这折现对象画在地图上：

var bmap_points = [];
for(var i in points){var bmap_point = new BMap.Point(points[i].lng, points[i].lat);bmap_points.push(bmap_point);
}var polyline = new BMap.Polyline(bmap_points, {strokeWeight: 5,strokeColor: "blue",strokeStyle: "solid"
});
map.addOverlay(polyline);

这样就画出了车辆运行的路线：

二、动画展示

在地图上创建一个图像标注Marker，这里使用默认的图象，如果想用汽车照片的话，还需要让汽车的照片进行转向，比较麻烦就没有实现。

// points数组是路线上的坐标点数组  存放的类型是BMap.Point()
var carMk = new BMap.Marker(points[0]);
map.addOverlay(carMk);
map.setCenter(points[0]);

接下去设置一个延迟函数setTimeout，让程序延迟300毫秒后运行。实现的效果就是每300毫秒汽车移动到下一个坐标位置，看起来就会有汽车在行驶的感觉，如果觉得有点卡顿，也可能将延迟时间设置的小一点；

timer_is_on = true;
function resetMkPoint(i){if(!timer_is_on) return;// 改变Marker的位置carMk.setPosition(points[i]);map.setCenter(points[i]);// 如果没有超出数组个数if(i < points.length){setTimeout(function(){i++;resetMkPoint(i);},300);} else {timer_is_on = false;}
}
my_timer = setTimeout(function() {resetMkPoint(0);}, 300);

上面的代码中，有一个全局变量timer_is_on ，如果想要在动画展示一半的时候打断动画，只要将timer_is_on 置为false即可。

效果图如下：

参考文章：
https://blog.csdn.net/yesenfei/article/details/53117018

百度地图API显示车辆运行轨迹并动画展示相关推荐

百度地图API显示多个标注点的代码以及修改传参
引用的页面原始数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
百度地图API 显示区域边界及地名定位
百度地图API 显示区域边界及地名定位这个定位一共用了两个方法组成一个是定位绘制区域边界线,另一个是地名定位原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...
关于百度地图API显示地区范围控制的问题
关于百度地图API显示地区范围控制的问题,这个有很多种方法,需要看个人需求下面列举两种方法 1.假如我只想在加载地图的时候显示郑州市所包含的范围,其他地方屏蔽掉,或者不让拖拽(如有图所示) 2. 控 ...
百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
前端捕捉轨迹_web端百度地图API实现实时轨迹动态展现
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...
【QT】--调用百度地图API显示
编译运行环境 Qt 5.15.2 MSVC2019 release编译 1.html文件百度地图提供API示例程序将代码复制到html文件中,用编辑器打开,这里用vs打开在图中位置替换为个人申请 ...
百度地图API - 行车路线轨迹
转自:http://hi.baidu.com/hackerbase/item/0a54b12d0005690e72863e3c <!DOCTYPE html> <html> ...

百度地图API显示车辆运行轨迹并动画展示

百度地图API显示车辆运行轨迹并动画展示相关推荐

最新文章

热门文章