百度地图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效果

百度地图API（二）轨迹回放相关推荐

百度地图api实现轨迹运动效果
百度地图api实现轨迹运动效果实现逻辑: 实现轨迹运动的效果无非就是将一段路程细化为很多个点,然后不过的根据这些点来画出移动轨迹. 实现流程: 1)使用DrivingRoute,根据起点和终点的位置 ...
百度地图API绘制轨迹
百度地图Javascript API绘制轨迹 (首先贴两个网站: 1.百度地图API官方示例. 2.百度地图Javascript API v3.0参考类. 一.新建Html文档新建文档可以直接从官方 ...
百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html> 2 3 4 5 6 7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family: ...
使用百度地图实现车辆轨迹回放
最近在做的项目有个车辆轨迹回放需求,查资料看到可以使用百度地图的路书功能实现,百度路书功能如下. 点击开始按钮,小车会在地图上移动还原历史轨迹. 具体需求就是通过调用后台接口获取到指定车辆的指定时间段 ...
百度地图API二次开发小经验分享
最近在做一个物流后台系统,需要用地图来把订单地址展示出来,需要在地图上批量框选坐标进行排单,需要看到配送员的实时位置等等功能. 在高德地图.腾讯地图.百度地图三者间,我选了百度地图,没有原因,个人偏好 ...
转载百度地图API二次开发小经验分享
转载From:http://www.cnblogs.com/yiyiBlog/p/5122224.html 最近在做一个物流后台系统,需要用地图来把订单地址展示出来,需要在地图上批量框选坐标进行排单, ...
使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
php百度地图接口两点测距,百度地图Api 根据两个坐标点计算距离
百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...

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

demo数据分析：

功能分析

demo效果

百度地图API（二）轨迹回放相关推荐

最新文章

热门文章