如何实现LBS轨迹回放功能？含多平台实现代码
本篇文章告诉您，如何实现轨迹回放。并且提供了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轨迹回放功能？含多平台实现代码的更多相关文章
- 如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...
- SVG轨迹回放实践
最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥).效果图如下: 在这篇文章中,我们来聊聊轨迹 ...
- 使用百度地图API实现轨迹回放
调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创 ...
- 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)
物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载) 2015年11月14日| by: nbboy| Category: 系统设计, 缓存设计, 高性能系统 摘要 ...
- OpenLayers3的轨迹回放
OpenLayers3实现轨迹回放需要动画操作,官网上的例子用的是postcompose,但是还可以使用javascript中setInterval和setTime. 我的例子是按官网上来的http: ...
- GPS/轨迹追踪、轨迹回放、围栏控制
折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪.轨迹回放.圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点 cas单点登录,mongdb灵活的 ...
- 使用GMap.NET类库，实现地图轨迹回放。(WPF版)
前言 实现轨迹回放,GMap.NET有对应的类GMapRoute.这个类函数很少,功能有限,只能实现简单的轨迹回放.要实现更复杂的轨迹回放,就需要自己动手了. 本文介绍一种方法,可以实现复杂的轨迹回放 ...
- Mapbox轨迹回放
轨迹回放是webgis中的常见功能,是一种被客户喜闻乐见的GIS动画. 动画是一种短时间内不停重绘达到不断运动的效果.本文中轨迹回放就是事先计算好所需要的点,后面再进行播放. ...
- Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）
本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...
随机推荐
- 数据字典和动态性能视图<五>
数据字典和动态性能视图 介绍:数据字典是什么 数据字典是 oracle 数据库中最重要的组成部分,它提供了数据库的一些系统信息. 动态性能视图记载了例程启动后的相关信息. 数据字典 数据字典记录了 ...
- cocos2d-x 之 CCArray 的遍历(3)
cocos2d-x中CCArray的遍历,需要几个宏.现代C++程序设计建议尽量不要使用宏,所以数组的遍历也可以自己写. 但cocos2d-x官方已经提供了几个方便数组遍历的几个宏,用好了,能方便许多 ...
- 张小龙《微信背后的产品观》之PPT完整文字版
微信回顾 433天,一亿用户 成为移动互联网的新入口 启动(2010年11月19日) 用户数突破1亿 1.0 1月26日 2.0 5月10日 语音对讲 2.5 8月3日 查看那附近的人 3.0 10月 ...
- mysql主主复制（双主复制）配置步骤
以前我们介绍的都是主从复制,这里给各位介绍一个双主复制了,下面都希望两个主服务器数据自动复制的话可参考一下此文章. MySQL主主复制结构区别于主从复制结构.在主主复制结构中,两台服务器的任何一台 ...
- poj3468 A Simple Problem with Integers (线段树区间最大值)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 92127 ...
- web标准：img图片在ie6下显示空白的bug解决方案
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”. 1.将图片转换为块级对象 ...
- iOS开发零基础--Swift篇：逻辑分支
一. 分支的介绍 分支即if/switch/三目运算符等判断语句 通过分支语句可以控制程序的执行流程 二. if分支语句 和OC中if语句有一定的区别 判断句可以不加() 在Swift的判断句中必须有 ...
- UILabel和UIButton
一.UILabel 1.UILabel:标签,主要用来显示文字. 创建步骤: (1)开辟空间并初始化(如果本类有初始化方法,使用自己的,否则,使用负父类的). UILabel *textLabel ...
- Vmware Vsphere WebService SDK开发（第一讲）-基本知识学习
刚开始这方面开发的时候,不知道如何下手,能够查到的资料特别少,而且看到很多网友和我一样也在找这方面的资料.接下来的一段时间我就结合自己所参与的项目,完成关于Vmware Vsphere WebServ ...
- 配置SQL Server去使用 Windows的 Large-Page/Huge-Page allocations
配置SQL Server去使用 Windows的 Large-Page/Huge-Page allocations 目录表->页表->物理内存页 看这篇文章之前可以先看一下下面这篇文章 ...