回到项目需求上来:做一个设备轨迹回放功能
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
}));
}
//根据点信息实时更新地图显示范围,让轨迹完整显示。设