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

最新推荐文章于 2025-08-09 14:56:14 发布

天空影

最新推荐文章于 2025-08-09 14:56:14 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：地图API 文章标签：百度地图api 轨迹回放

本文链接：https://blog.youkuaiyun.com/jx950915/article/details/81011886

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

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
    }));
}
//根据点信息实时更新地图显示范围，让轨迹完整显示。设