调用百度地图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. 不通过注册表使用ActiveX对象

    为了弄清楚COM库的运行原理,特意做了这个实验: #include "stdafx.h" #include "objbase.h" #include " ...

  2. Jquery 官网下载流程

    选中解压版本,然后把ctrl+s保存另存为他的min版本

  3. 湖南大学ACM程序设计新生杯大赛（同步赛）L - Liao Han

    题目描述 Small koala special love LiaoHan (of course is very handsome boys), one day she saw N (N<1e1 ...

  4. springMVC+freemarker实现自定义标签

    在开发过程中,有些需要引用到重复的页面,或者动态的数据 修改数据库是可以实现,但是太麻烦了. freemarker自定义标签在开发中用途很广,就说个入门实例吧 基于springmvc. 首先需要导入对 ...

  5. NumPy简明教程（二、数组1）

    NumPy数组 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的元数据 大部分操作仅针对于元数据,而不改变底层实际的数据. 关于NumPy数组有几点必 ...

  6. hdu dp 1257 最小拦截系统

    最少拦截系统 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  7. Vue 2.0学习（七）方法与事件

    基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button ...

  8. HDU 1272（并查集）

    小希的迷宫 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  9. [USACO06FEC]Milk Patterns --- 后缀数组

    [USACO06FEC]Milk Patterns 题目描述: Farmer John has noticed that the quality of milk given by his cows v ...

  10. [BZOJ2878][NOI2012]迷失游乐园(环套树DP+概率)

    推荐讲解:https://www.cnblogs.com/Tunix/p/4561493.html 首先考虑树的情况,就是经典的树上概率DP.先DP出down表示从这个点向儿子走能走的期望长度,再DP ...