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

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

2.用Marker添加标注点

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

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

  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>

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

  1. 百度地图API 绘制轨迹历史

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 百度地图API二：根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

    原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/liusaint1992/ ...

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

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

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

    百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...

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

    最近公司在做项目需需求:车辆定位后在地图显示历史轨迹的功能 一开始使用了google的地图api,但是发现会一直关闭,索性支持下国产,使用了百度地图api search方法把两个点连接成线后,会出现起 ...

  6. web端百度地图API实现实时轨迹动态展现

    最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...

  7. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

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

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

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

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

随机推荐

  1. windows环境下模仿Linux环境发起curl请求

    1.到官网下载curl工具包 2.在curl.exe目录中使用(使用方式1) 解压下载后的压缩文件,通过cmd命令进入到curl.exe所在的目录. 由于博主使用的是windows 64位 的系统,因 ...

  2. 关于 DP 的一些题目

    DP 是真的好玩. 口胡一段话题解: DP 题集 1 DP 题集 2

  3. Lambda演算（一）大道至简

    从选择信息专业开始到回炉读书为止,四舍五入码了八年代码.对于计算机科学的认知仅限于: 1)使用不同语言实现特定功能 2)实现不同算法以增进系统性能 3)搭建不同架构进行组织管理   但从未思考一些本质 ...

  4. springMVC项目，存中文到mysql是乱码（?????）

    问题:jdbc连接mysql数据库,web页面输入的中文,存到数据库却变成"????”: 但是数据库中的中文却能够正常读出并在页面显示 mysql中运行 :SHOW VARIABLES LI ...

  5. 2017/11/9 Leetcode 日记

    2017/11/9 Leetcode 日记 566. Reshape the Matrix In MATLAB, there is a very useful function called 'res ...

  6. 【BZOJ 3729】3729: Gty的游戏 （Splay维护dfs序+博弈）

    未经博主同意不得转载 3729: Gty的游戏 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 448  Solved: 150 Description ...

  7. [APIO2010]特别行动队 --- 斜率优化DP

    [APIO2010]特别行动队 题面很直白,就不放了. 太套路了,做起来没点感觉了. \(dp(i)=dp(j)+a*(s(i)-s(j))^{2}+b*(s(i)-s(j))+c\) 直接推出一个斜 ...

  8. [BZOJ3514]CodeChef MARCH14 GERALD07加强版(LCT+主席树)

    3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 2177  Solved: 834 ...

  9. bzoj 2724 在线区间众数

    如果不是在线,就是裸的莫队. 但这道题要求在线,然后就不会了.. 标程: http://hi.baidu.com/__vani/item/ecc63f3527395283c2cf2945 算法主要是分 ...

  10. Djangio笔记

    django图解 新创建一个项目后的目录层级