本篇文章告诉您，如何实现轨迹回放。并且提供了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. iOS 不让自动锁屏

    [UIApplication sharedApplication].idleTimerDisabled=YES;

  2. geohash算法原理及实现方式

    1.geohash特点 2.geohash原理 3.geohash的php .python.java.C#实现代码 4.观点讨论 w微博:http://weibo.com/dxl0321 geohas ...

  3. db2 怎么计算两个时间相差多少个月。如2015-10-10 和2014-1-12

    SELECT timestampdiff (256, char(timestamp('2013-12-30 20:30:30') - timestamp('2001-09-26 15:24:23')) ...

  4. Ubuntu和Windows的交互工具---Samba环境配置

    Samba软件安装 使用源代码安装samba,在终端输入如下指令: #sudo apt-get install samba #sudo apt-get install smbclient #sudo ...

  5. [Leetcode][JAVA] Word Ladder

    Given two words (start and end), and a dictionary, find the length of shortest transformation sequen ...

  6. 内存不足 java.lang.OutOfMemoryError: PermGen space

    错误: 原因: 改成: -Xms1024m -Xmx1200m -XX:PermSize=256M  

  7. [原] XAF 如何非常容易禁止清除一个下拉字段的值？

  8. FFMpeg写MP4文件例子分析

    http://blog.csdn.net/eightdegree/article/details/7425811 这段时间看了FFMpeg提供的例子muxing.c,我略微修改了下源代码,使其生成一个 ...

  9. 谈谈自己了解的spring.NET的依赖注入

         spring.net里实现了控制反转IOC(Inversion of control),也即依赖注入DI(Dependency Injection),以达到解耦的目的,实现模块的组件化.程序 ...

  10. We have detected that MySQL products under the Commercial license are installed. In order to proceed with this GPL installation these Commercial

    下载了MySQL 5.6.15,在安装时,出现了下面的提示信息: 按提示信息的要求单击“是”,结果安装就无法进行下去. 从提示信息上看,意思是指电脑中原来安装有商业版的许可,现在要转换成为GPL许可. ...