百度地图API显示车辆运行轨迹并动画展示_飞道的博客

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

2020-06-06 08:28 340人阅读评论(0)

百度地图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);
           // ...
        }
    });

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