使用百度地图API实现轨迹回放

调用百度地图API实现路线的轨迹回放功能其实很简单，只要搞懂以下几点即可：

1.需要用Polyline方法先绘制好路线图

2.用Marker添加标注点

3.关键一步，通过结合定时器，使用Marker创建的标注点实例的setPosition改变标注点位置，实现播放功能

代码分享，直接复制即可使用

[html] view plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Track</title>
  7. <style type="text/css">
  8. html{height:100%}
  9. body{height:100%;margin:0px;padding:0px}
  10. #controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
  11. #container{height:100%}
  12. </style>
  13. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
  14. <script type="text/javascript">
  15. //获取所有点的坐标
  16. var points = [
  17. new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),
  18. new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),
  19. new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),
  20. new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),
  21. new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),
  22. new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)
  23. ];
  24. var map;   //百度地图对象
  25. var car;   //汽车图标
  26. var label; //信息标签
  27. var centerPoint;
  28. var timer;     //定时器
  29. var index = 0; //记录播放到第几个point
  30. var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮
  31. function init() {
  32. followChk = document.getElementById("follow");
  33. playBtn = document.getElementById("play");
  34. pauseBtn = document.getElementById("pause");
  35. resetBtn = document.getElementById("reset");
  36. //初始化地图,选取第一个点为起始点
  37. map = new BMap.Map("container");
  38. map.centerAndZoom(points[0], 15);
  39. map.enableScrollWheelZoom();
  40. map.addControl(new BMap.NavigationControl());
  41. map.addControl(new BMap.ScaleControl());
  42. map.addControl(new BMap.OverviewMapControl({isOpen: true}));
  43. //通过DrivingRoute获取一条路线的point
  44. var driving = new BMap.DrivingRoute(map);
  45. driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));
  46. driving.setSearchCompleteCallback(function() {
  47. //得到路线上的所有point
  48. points = driving.getResults().getPlan(0).getRoute(0).getPath();
  49. //画面移动到起点和终点的中间
  50. centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
  51. map.panTo(centerPoint);
  52. //连接所有点
  53. map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));
  54. //显示小车子
  55. label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
  56. car = new BMap.Marker(points[0]);
  57. car.setLabel(label);
  58. map.addOverlay(car);
  59. //点亮操作按钮
  60. playBtn.disabled = false;
  61. resetBtn.disabled = false;
  62. });
  63. }
  64. function play() {
  65. playBtn.disabled = true;
  66. pauseBtn.disabled = false;
  67. var point = points[index];
  68. if(index > 0) {
  69. map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
  70. }
  71. label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);
  72. car.setPosition(point);
  73. index++;
  74. if(followChk.checked) {
  75. map.panTo(point);
  76. }
  77. if(index < points.length) {
  78. timer = window.setTimeout("play(" + index + ")", 200);
  79. } else {
  80. playBtn.disabled = true;
  81. pauseBtn.disabled = true;
  82. map.panTo(point);
  83. }
  84. }
  85. function pause() {
  86. playBtn.disabled = false;
  87. pauseBtn.disabled = true;
  88. if(timer) {
  89. window.clearTimeout(timer);
  90. }
  91. }
  92. function reset() {
  93. followChk.checked = false;
  94. playBtn.disabled = false;
  95. pauseBtn.disabled = true;
  96. if(timer) {
  97. window.clearTimeout(timer);
  98. }
  99. index = 0;
  100. car.setPosition(points[0]);
  101. map.panTo(centerPoint);
  102. }
  103. </script>
  104. </head>
  105. <body onload="init();">
  106. <div id="controller" align="center">
  107. <input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>
  108. <input id="play" type="button" value="播放" onclick="play();" disabled />
  109. <input id="pause" type="button" value="暂停" onclick="pause();" disabled />
  110. <input id="reset" type="button" value="重置" onclick="reset()" disabled />
  111. </div>
  112. <div id="container"></div>
  113. </body>
  114. </html>
时间： 2024-12-26 02:40:29

使用百度地图API实现轨迹回放的相关文章

百度地图API 绘制轨迹历史

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 &l

使用百度地图API制作线路轨迹播放

1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1) 1.2绘制动态轨迹图(固定间隔时间) 每隔500毫秒读取一个轨迹点,实现a,b两个功能 a增加一条polyline b将marker从先前的point移到当前点 主方法使用setTimeout方法迭代来实现动态循环 Polyline在

百度地图api描绘车辆历史轨迹图

最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能 一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起点和终点的图标,但是需要要求只有第一个点和最后一个点是起点和终点,中间的全是小车的图案 我画点的功能是为了覆盖掉 search连线的起始点,但是覆盖后悬浮弹出层会出现问题,所以我就写把存放起点和终点的层去掉, 但是地图渲染时需要时间的,我采取了2秒后执行,把存放起点和终点icon的div清空了,这样

百度地图API，根据经纬度实现车辆移动轨迹绘制

百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连线起来,形成连贯的轨迹线路 4.生成下一个图标后删除上一个绘制的图标,形成小车移动动画感 5.本例使用的是临近的随机坐标点 6.初学者,欢迎大家交流学习 7.查看实例 代码: [html] view plain copy <!DOCTYPE html> <html> <head&

【百度地图API】北京周边7日游——图标按路线轨迹行动

原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始驾车旅游啦~~ 如何实现: 利用百度地图API先确定几个坐标点points,把他们连成一条折线BMap.Polyline(points). 然后,更改标注图片为一辆小车,var myIcon = new BMap.Icon("car.png",...). 最后利用二次开发的类K_point

吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 地图界面: ZMap.js 部分代码说明 /** * 百度地图 api 功能整合 * @author Glo

百度地图利用DrivingRoute做轨迹回放

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"

百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面预览 本界面项目由:

Bootstrap model模态框与百度地图API发生冲突时的解决办法

在使用百度地图API的过程中,当我需要在infoWindow的按钮点击触发modal模态框时,就会发现bootstrap的模态框会失效.弄清modal的原理就可以通过自定义modal的css样式和modal方法来解决这个问题.Bootstrap modal模态框的原理是通过控制modal框div的visibility属性来变化来实现的,在初始状态modal div的visibility属性值为hidden,在页面上隐藏,当点击按钮触发(或别的事件)一个方法使div的visibility值变为vi