百度地图离线API（二）——轨迹回放

回到项目需求上来：做一个设备轨迹回放功能

demo数据分析：

因为我只是做一个demo,所以设计到时间、设备查询就不做了，直接做一组假坐标数据

// 初始化
var map = new BMap.Map("map_demo"); // 创建Map实例
map.centerAndZoom(new BMap.Point(113.953162, 22.532701), 16); // 初始化地图,设置中心点坐标和地图级别
map.setCurrentCity("高新园"); // 设置地图中心显示的城市 new！
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl()); //缩放按钮

//获取到的坐标点
var arrPoints = [
    new BMap.Point(113.960623, 22.546082), new BMap.Point(113.958197, 22.544029),
    new BMap.Point(113.956526, 22.543245), new BMap.Point(113.953562, 22.544563),
    new BMap.Point(113.954263, 22.546749)
];

功能分析

1、首先得有画折线功能
2、有标注移动功能
3、不间断的画折线，使用setTimeout()
4、地图中心要随折线中心移动

//画折线
function driveline(points) {
    map.addOverlay(new BMap.Polyline(points, {
        strokeColor: "black",
        strokeWeight: 5,
        strokeOpacity: 1
    }));
}
//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
function setZoom(bPoints) {
    var view = map.getViewport(eval(bPoints));
    // var mapZoom = view.zoom;
    var centerPoint = view.center;
    map.centerAndZoom(centerPoint, 16);
}

var i = 0,
    points = [];
//执行方法
function dynamicLine() {
    if (i == arrPoints.length) return;
    var mkr = new BMap.Marker(arrPoints[i]);
    map.addOverlay(mkr); //标点  
    var label = new BMap.Label(arrPoints[i].lng, {
        offset: new BMap.Size(20, -10)
    });
    mkr.setLabel(label);
    points.push(arrPoints[i]);
    setZoom(points)
    driveline(points);
    i++;
    setTimeout(dynamicLine, 1000);
}
//绑定事件
$(function () {
    $('#play').bind('click', function () {
        dynamicLine()
    })
})

demo效果