本篇文章告诉您，如何实现轨迹回放。并且提供了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

转载于:https://www.cnblogs.com/milkmap/p/5916273.html

如何实现LBS轨迹回放功能？含多平台实现代码相关推荐

js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染（微信小程序）
使用uni-app中 map组件实现路线轨迹回放功能. 1.通过接口获取返回的轨迹点. 2.地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差.点经纬度转换,wgs84togcj02 =>j ...
cesium 根据SampledPositionProperty与timeline实现轨迹回放功能（跟随视角、上帝视角）详细代码与理解记录
cesium 根据SampledPositionProperty与timeline实现轨迹回放功能(跟随视角.上帝视角) 详细代码与理解,文末附完整代码最终类似效果展示大致原理摘要引用出处这个 ...
高德地图轨迹回放功能
一.介绍在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...
基于Leaflet实现路径轨迹回放功能
效果图: 说明: 1.该功能是在这篇博客基础上完成的:ArcGIS JS API 实现路径轨迹回放但是里面有点小问题:首先,小车并不是匀速运动的,而是每一段的运行时间固定,所以在该博客上进行了修改 ...
高德地图单点、多点标记，轨迹绘制，自定义标记覆盖物,给标记添加点击事件，移除所有标记和轨迹，轨迹回放功能
文档地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注册到官网注册一下就可以了https://lbs.amap.com/并创 ...
STM32+MC20实现GPS定位及基站LBS，发送到云平台，可以轨迹回放
使用STM32F103单片机+MC20 无线通信模块,MC20集成GPS.蓝牙.LBS基站定位.GPRS等功能是一款非常强的模块.使用它做一个GPS定位及基站定位,在室内或者隧道等没有GPS信号的情况 ...
高德地图3D轨迹回放 + 视野跟随功能
高德地图3D轨迹回放 + 视野跟随功能概述代码实现步骤完整代码 (需要添加一个2.0的key) 概述若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面 ...
百度路书实现车辆轨迹动态回放功能-javascrpt版
基于百度路书js实现车辆轨迹回放功能:接到一个新需求,实现车辆历史轨迹回放功能,之前没有做过,根据网上各种文章走了一些坑,基本上都是半成品,最后还是看百度地图原生api完成开发,现在把最终结果分享给大 ...
腾讯地图教你快速实现轨迹回放
前言在地图接入使用中,很多开发者咨询我们腾讯位置服务是否支持轨迹回放功能,所以今天特意将我们JavaScript API GL的轨迹回放&小车移动示例放到我们本篇文章分享. 轨迹回放& ...

如何实现LBS轨迹回放功能？含多平台实现代码

Web端/JavaScript

iOS轨迹回放

Android轨迹回放

如何实现LBS轨迹回放功能？含多平台实现代码相关推荐

最新文章

热门文章