本篇文章告诉您，如何实现轨迹回放。并且提供了web端，iOS端，Android端3个平台的轨迹回放代码。拷贝后可以直接使用。另外，文末有小彩蛋，算是开发者的福利。

Web端/JavaScript

实现轨迹回放有2个主要功能需要实现，1个是定位取点，1个是按照轨迹慢慢移动Marker。

如何实现定位取点，可以看之前的文章：http://www.cnblogs.com/milkmap/p/4962085.html

本篇文章里的定位点，我就直接假设一堆点，可以push到数组里。

var marker, lineArr = [];

var lngX = 116.397428, latY = 39.90923;   //第一个点

lineArr.push([lngX, latY]);

用一个随机函数来模拟车行轨迹，如下：

  for (var i = 1; i < 3; i++) {

            lngX = lngX + Math.random() * 0.05;

            if (i % 2) {

                latY = latY + Math.random() * 0.0001;

            } else {

                latY = latY + Math.random() * 0.06;

            }

        }

轨迹绘制，使用折现绘制的代码，最后再调用最佳视野展示的函数：

 // 绘制轨迹

        var polyline = new AMap.Polyline({

            map: map,

            path: lineArr,

            strokeColor: "#00A",  //线颜色

            strokeOpacity: 1,     //线透明度

            strokeWeight: 3,      //线宽

            strokeStyle: "solid"  //线样式

        });

        map.setFitView();

然后用一个小动画，来实现轨迹回放。代码如下：

 marker.moveAlong(lineArr, 500);   //开始沿lineArr的轨迹运动

如果要停止运动，请调用这个函数：

 marker.stopMove();

示意图：

全部源代码：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>轨迹回放</title>

    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

</head>

<body>

<div id="container"></div>

<div class="button-group">

    <input type="button" class="button" value="开始动画" id="start"/>

    <input type="button" class="button" value="停止动画" id="stop"/>

</div>

<script>

    var marker, lineArr = [];

    var map = new AMap.Map("container", {

        resizeEnable: true,

        center: [116.397428, 39.90923],

        zoom: 17

    });

    map.on("complete", completeEventHandler);

    AMap.event.addDomListener(document.getElementById('start'), 'click', function() {

        marker.moveAlong(lineArr, 500);

    }, false);

    AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {

        marker.stopMove();

    }, false);

    // 地图图块加载完毕后执行函数

    function completeEventHandler() {

        marker = new AMap.Marker({

            map: map,

            position: [116.397428, 39.90923],

            icon: "http://webapi.amap.com/images/car.png",

            offset: new AMap.Pixel(-26, -13),

            autoRotation: true

        });

        var lngX = 116.397428, latY = 39.90923;

        lineArr.push([lngX, latY]);

        for (var i = 1; i < 3; i++) {

            lngX = lngX + Math.random() * 0.05;

            if (i % 2) {

                latY = latY + Math.random() * 0.0001;

            } else {

                latY = latY + Math.random() * 0.06;

            }

            lineArr.push([lngX, latY]);

        }

        // 绘制轨迹

        var polyline = new AMap.Polyline({

            map: map,

            path: lineArr,

            strokeColor: "#00A",  //线颜色

            strokeOpacity: 1,     //线透明度

            strokeWeight: 3,      //线宽

            strokeStyle: "solid"  //线样式

        });

        map.setFitView();

    }

</script>

</body>

</html>

iOS轨迹回放

3D地图的轨迹回放，https://github.com/hadesh/iOS_3D_RecordPath

2D地图的轨迹回放，https://github.com/hadesh/iOS_2D_RecordPath

Android轨迹回放

https://github.com/amapapi/RecordPath3D

---------------------------------------------------------------------------------------------------------------

即日起至 2016/10/31 止，凡注册成为高德开发者的新用户，即可获赠 1 张阿里云优惠券，可享受最低 6 折购买阿里云产品。数量有限，发完即止。详情点击： http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=20143

如何实现LBS轨迹回放功能？含多平台实现代码的更多相关文章

  1. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  2. SVG轨迹回放实践

    最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥).效果图如下: 在这篇文章中,我们来聊聊轨迹 ...

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

    调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...

  4. 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)

    物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)   2015年11月14日|    by: nbboy|    Category: 系统设计, 缓存设计, 高性能系统 摘要 ...

  5. OpenLayers3的轨迹回放

    OpenLayers3实现轨迹回放需要动画操作,官网上的例子用的是postcompose,但是还可以使用javascript中setInterval和setTime. 我的例子是按官网上来的http: ...

  6. GPS/轨迹追踪、轨迹回放、围栏控制

    折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪.轨迹回放.圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点 cas单点登录,mongdb灵活的 ...

  7. 使用GMap.NET类库，实现地图轨迹回放。(WPF版)

    前言 实现轨迹回放,GMap.NET有对应的类GMapRoute.这个类函数很少,功能有限,只能实现简单的轨迹回放.要实现更复杂的轨迹回放,就需要自己动手了. 本文介绍一种方法,可以实现复杂的轨迹回放 ...

  8. Mapbox轨迹回放

        轨迹回放是webgis中的常见功能,是一种被客户喜闻乐见的GIS动画.     动画是一种短时间内不停重绘达到不断运动的效果.本文中轨迹回放就是事先计算好所需要的点,后面再进行播放.      ...

  9. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

随机推荐

  1. 《Java程序设计》课程准备之问卷调查

    一.你对自己的未来有什么规划?做了哪些准备? 答:未来就是找个好工作,在保证自己与父母生活条件良好的基础上,进一步的提高精神上的需求.如:旅游度假,支持更多业余爱好等.准备就是:好好学习,好好运动,好 ...

  2. HDU2243_考研路茫茫――单词情结

    给出一些词根,问你有多少种长度为L的串包含至少一个词根. 去年就在敲这个题了,今年才敲出来,还是内牛满面之中... 要求包含至少一个的情况,需要求出所有的情况,减去一个都没有的情况就可以了. 对于给出 ...

  3. js之函数

    1.倒计时定时器 timename=setTimeout("function()",delaytime); clearTimeout(timename); 2.循环定时器 time ...

  4. 20151009 C# 第一篇 基础知识

    20151009 C#:优点: 1. 语法简洁:不直接操作内存,去掉了指针操作 2. 面向对象:具有封装.继承.多态特性 3. 支持Web标准:支持HTML.XML.SOAP 4. 兼容性:遵循.Ne ...

  5. [f]动态判断js加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  6. Poj-1157-LITTLE SHOP OF FLOWERS

    题意为从每行取一瓶花,每瓶花都有自己的审美价值 第 i+1 行取的花位于第 i 行的右下方 求最大审美价值 dp[i][j]:取到第 i 行,第 j 列时所获得的最大审美价值 动态转移方程:dp[i] ...

  7. 第40讲：Set、Map、TreeSet、TreeMap操作代码实战

    今天来看下set map的操作,让我们从代码出发 val data = mutable.Set.empty[Int] data ++= List(1,2,3)//在空set上加入列表 data += ...

  8. iPad上的Cookie到底有多长？

    [故事背景]: 公司某个站点,特别依赖Cookie的使用,而且用的比较狠.在设计之初想当然地以为到达Cookie上限是猴年马月的事儿,没想到时过境迁,这个上限真的来了. 着手改吧,也不想投入太多.于是 ...

  9. 数据库知识整理<三>

    保证数据的完整性: 3.1数据完整性概述: 数据完整性的意义:我们知道数据库能防止储存垃圾数据,RDBMS实现该功能主要是通过维护数据完整性来实现的.根据数据完整性实施方法我们将其分为四类:实体完整性 ...

  10. iOS开发常用的第三方类库

    在iOS开发中不可避免的会用到一些第三方类库,它们提供了很多实用的功能,使我们的开发变得更有效率:同时,也可以从它们的源代码中学习到很多有用的东西. Reachability 检测网络连接 用来检查网 ...