调用百度地图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. Xpath,XQuery,DTD

    一.Xpath XPath 是一门在 XML 文档中查找信息的语言;XPath 是 XSLT 中的主要元素.XPath是W3C标准.1.七种类型节点:元素.属性.文本.命名空间.处理指令.注释.文档节 ...

  2. 用vue-wechat-title为微信动态设置标题

    1.安装插件 cnpm install vue-wechat-title --save 2.在main.js中引入 Vue.use(require('vue-wechat-title')) 3.在路由 ...

  3. 【转】LoadRunner常见问题整理

    原文出自:http://blog.csdn.net/loadrunn/article/details/7886918 1.LR 脚本为空的解决方法: 1.去掉ie设置中的第三方支持取消掉 2.在系统属 ...

  4. Windows 下安装 tensorflow & keras & opencv 的避坑指南！

    安装 Anaconda3 关键的一步: conda update pip 下面再去安装各种你需要的包,一般不会再报错. pip install -U tensorflow pip install -U ...

  5. Java switch case和数组

    Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch case 语句格式: switch(express ...

  6. 2017/11/3 Leetcode 日记

    2017/11/3 Leetcode 日记 654. Maximum Binary Tree Given an integer array with no duplicates. A maximum ...

  7. xpath相关巩固

    python爬虫xpath的语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 ...

  8. 正则表达式 \ 和 原生字符串 r

    使用python写字符串常量时,raw string是个很好用的东东,比如在C里我要写一个Windows下的路径,得这么写: char *path = "C:\\mydir\\myfile. ...

  9. BZOJ4530 BJOI 2014 大融合

    对LCT子树大小进行维护. size表示实子树大小,sz表示虚子树大小. 具体操作是体现在link和splay中,可以看代码. 注意每次做完都要update. By:大奕哥 #include<b ...

  10. Codeforces 408 E. Curious Array

    $ >Codeforces \space 408 E. Curious Array<$ 题目大意 : 有一个长度为 \(n\) 的序列 \(a\) ,\(m\) 次操作,每一次操作给出 \ ...