调用百度地图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. Wannafly挑战赛7 C - 小Q与氪金游戏

    题目描述 “为世界上所有的美好而战!”小Q同学最近沉迷“稳固3”,为了从最新的蛋池中抽出自己喜欢的角色卡,不惜氪下重金.在这个游戏中,氪一单可以得到x个宝石,而抽一次卡需要花费y个宝石,由于游戏策划十 ...

  2. Python数据类型-列表(list)增删改查

    1.添加元素 添加单个元素:使用append(object)函数可以为列表添加单个元素,参数object为对象:也就是说所有Python的对象都可以添加到列表中. 添加多个元素(合并列表):使用ext ...

  3. hp

    命令组成hpacucli [parameter=value] 查看: 查看所有控制器状态 hpacucli ctrl all show 查看slot 0阵列信息详细状态 (可以查看物理磁盘和逻辑磁盘的 ...

  4. React Native 系列(三)

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  5. Node.js下的Hello World

    Node.js技术现在可谓是如火如荼,前后端都统一为Javascript的体验绝对是受到了很多人的青睐,我都后悔以前没抽时间好好学一学Javascript了. 首先,我来介绍一下Node.js.本人实 ...

  6. python @classmethod 的使用场合

    python @classmethod 的使用场合 官方的说法: classmethod(function)中文说明:classmethod是用来指定一个类的方法为类方法,没有此参数指定的类的方法为实 ...

  7. 【BZOJ 3527】 3527: [Zjoi2014]力 （FFT）

    3527: [Zjoi2014]力 Time Limit: 30 Sec  Memory Limit: 256 MBSec  Special JudgeSubmit: 2003  Solved: 11 ...

  8. 【BZOJ 2749】 2749: [HAOI2012]外星人 （数论-线性筛？类积性函数）

    2749: [HAOI2012]外星人 Description Input Output 输出test行,每行一个整数,表示答案. Sample Input 1 2 2 2 3 1 Sample Ou ...

  9. java 软引用，弱引用，强引用

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 强引用 ,有用的对象. 强引用 不会被回收. 软引用,有用 但不是必须的对象. 系统在发 ...

  10. 【贪心】hdu4803 Poor Warehouse Keeper

    题意:一开始有1个物品,总价是1.你的一次操作可以要么使得物品数量+1,总价加上当前物品的单价.要么可以使得总价+1,物品数量不变.问你最少要几次操作从初始状态到达有x个物品,总价是y的状态.这里的y ...