高德地图-轨迹回放(二)
利用高德地图作轨迹回放的另一种方法是利用官方api覆盖物中的AMap.Polyline来做,官方给出的例子中也是此原理实现的。
实现地图轨迹的主要函数如下
function track(){map.clearMap();//先清空地图$('.pos .posDesc').empty();$.getJSON('track.json',function(data){//这是获取数据var arr1=[];var arr=[];var startPot = [];var endPot = [];for(var i=0;i<data.gps.length;i++){var dt = data.gps[i].dTime;if(diff(dt,$st.val())>=0&&diff(dt,$et.val())<=0){arr1 = GPS.gcj_encrypt(data.gps[i].latY,data.gps[i].lngX);//坐标转换,消除坐标误差 arr.push([arr1.lon,arr1.lat]);} }startPot = arr[0];endPot = arr[arr.length-1];var marker= new AMap.Marker({map: map,position: startPot,icon: "http://webapi.amap.com/images/car.png",//代表人物的图标offset: new AMap.Pixel(-26,-13),autoRotation: true//自动转弯(ie8及以下不支持) });//添加起点标志//绘制路线(利用官方的api,根据坐标绘制路线)var polyline = new AMap.Polyline({map: map,path: arr,strokeColor: "#9F9F5F",strokeWeight:6,lineJoin:"round"});//走过路线的样式var passedPolyline = new AMap.Polyline({map:map,strokeColor:"#006BB1 ",strokeWeight:6,isOutline:true,outlineColor:'#fff',showDir:true,lineJoin:"round"});//设置移动过的路线marker.on('moving',function(e){passedPolyline.setPath(e.passedPath);});//视野居中 map.setFitView();AMap.event.addDomListener(start,'click',function(){marker.moveAlong(arr,speed.value);//设置移动路线及速度 },false);AMap.event.addDomListener(pause,'click',function(){marker.pauseMove();//暂停运动 },false);AMap.event.addDomListener(resume,'click',function(){marker.resumeMove();//继续运动},false);AMap.event.addDomListener(stop,'click',function(){marker.stopMove();//停止运动 map.clearMap();},false);var stmarker = new AMap.Marker({map: map,position: startPot, //基点位置(起点)icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",zIndex: 10});var endmarker = new AMap.Marker({map: map,position: endPot, //基点位置(终点)icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",zIndex: 10});}); }
以上就是利用高德地图的AMap.Polyline绘制地图,并实现轨迹回放的主要方式,以此总结
转载于:https://www.cnblogs.com/xiaoshudian/p/7694084.html
高德地图-轨迹回放(二)相关推荐
- 高德地图轨迹回放功能
一.介绍 在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...
- Android实现高德地图轨迹回放
Android实现高德地图轨迹回放 写在前面 准备 官方文档解读 创建应用: 地图api引入: 权限添加 效果展示 过程实现 地图初始化 定位 显示标记点 点平滑移动 添加呼吸点 写在结尾 写在前面 ...
- android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...
DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线 由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点 加注轨迹纠偏函数,根据时间判定此次移 ...
- 高德地图轨迹回放、路径规划以及计算面积(超详细!!)
主要涉及到高德地图的路径规划.区域规划以及轨迹回放功能. 一.基础设置:地图 //创建地图var map = new AMap.Map('map',{zoom:17,//视角级别//中心点坐标// p ...
- 高德地图轨迹回放、点的弹跳效果、浏览器环境监测、设置地图的主题样式、GPS坐标转为高德坐标、地图加载提示、地图DOM事件、修改图层等API接口
1.轨迹回放 https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data 2.点的 ...
- 高德地图轨迹回放_高德地图上线了一个新功能….
文.路人甲TM 德地图这两天刚上线了一个叫做「家人地图」的功能,所谓家人地图顾名思义,就是你可以通过高德地图组建一个家人圈,在这个圈子里面你可以看到你的家人在什么位置,当你的家人到达什么位置的时候自动 ...
- 高德地图轨迹回放_高德上线“家人地图”功能
鞭牛士 7月14日消息,高德今日上线了"家人地图"功能,可以让家人随时看到彼此的位置,特别是针对空巢老人家庭,子女忙于工作,父母独自在家,老人有没有出门,外出去到了哪里,有没有偏离 ...
- android中高德地图轨迹回放,轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API...
轨迹回放 html, body, #container { height: 100%; width: 100%; } .input-card .btn{ margin-right: 1.2rem; w ...
- 百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线 在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
最新文章
- MySQL数据模型图导出ddl脚本_DB2中导出数据库的所有DDL脚本.
- 数据庞大繁杂,如何精简挖掘?
- 可用性SLA还不懂?看完这个故事就懂了
- createsolidcaret 后 很快就不闪烁了_为什么LED灯会越用越暗?为什么会闪烁?
- 实例:用户登录(python 版)
- H.323通信协议学习总结
- 关于thymeleaf静态资源找不到的问题
- WebSocket使用sendObject(Object arg0)向页面方法发送对象
- Linux 防火墙配置
- 软件测试报告怎么编写,最新软件测试模板推荐【建议收藏】
- 谷歌浏览器Vue插件
- 搬运:php入门安装教程
- Fleck For Web Socket
- Java中 VO、 PO、DO、DTO、 BO、 QO、DAO、POJO的概念(转)
- java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
- win7字体大小怎么设置_怎么设置 win7系统excel2010定时保存和数据恢复的方案 -win7系统使用教程...
- 立体匹配---立体匹配过程
- 计算机电脑维修 维修不求人,电脑维修不求人:电脑常见故障维修大全及解决方法...
- 如何将JSONArray转为String数组
- 三人同行七十稀 - 中国剩余定理浅析
热门文章
- go build 参数_从0开始Go语言,用Golang搭建网站
- plc tcp ip通讯怎么只能连一个客户端_浅谈西门子plc的profinet功能的开放式通信功能...
- intranet的计算机环境包括,计算机四级考试网络工程师考点:企业网与Intranet
- python中emuterate用法_跨平台模拟执行 - AndroidNativeEmu实用手册
- 计算机专业核心技术,计算机系多媒体核心技术实验室建设专业方案(10页)-原创力文档...
- 联想p720装系统_分享联想ThinkPad X1 Carbon笔记本最稳的重装WIN10系统方法
- springcloud @EnableDiscoveryClient注解作用
- 14K Star,「程序员做饭指南」冲上热榜
- 牛逼!Python的判断、循环和各种表达式(长文系列第②篇)
- 花里胡哨?一起来看看 PyCharm 2019.3 增加了哪些新功能吧