利用高德地图作轨迹回放的另一种方法是利用官方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

高德地图-轨迹回放(二)相关推荐

  1. 高德地图轨迹回放功能

    一.介绍        在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...

  2. Android实现高德地图轨迹回放

    Android实现高德地图轨迹回放 写在前面 准备 官方文档解读 创建应用: 地图api引入: 权限添加 效果展示 过程实现 地图初始化 定位 显示标记点 点平滑移动 添加呼吸点 写在结尾 写在前面 ...

  3. android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...

    DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线 由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点 加注轨迹纠偏函数,根据时间判定此次移 ...

  4. 高德地图轨迹回放、路径规划以及计算面积(超详细!!)

    主要涉及到高德地图的路径规划.区域规划以及轨迹回放功能. 一.基础设置:地图 //创建地图var map = new AMap.Map('map',{zoom:17,//视角级别//中心点坐标// p ...

  5. 高德地图轨迹回放、点的弹跳效果、浏览器环境监测、设置地图的主题样式、GPS坐标转为高德坐标、地图加载提示、地图DOM事件、修改图层等API接口

    1.轨迹回放 https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data 2.点的 ...

  6. 高德地图轨迹回放_高德地图上线了一个新功能….

    文.路人甲TM 德地图这两天刚上线了一个叫做「家人地图」的功能,所谓家人地图顾名思义,就是你可以通过高德地图组建一个家人圈,在这个圈子里面你可以看到你的家人在什么位置,当你的家人到达什么位置的时候自动 ...

  7. 高德地图轨迹回放_高德上线“家人地图”功能

    鞭牛士 7月14日消息,高德今日上线了"家人地图"功能,可以让家人随时看到彼此的位置,特别是针对空巢老人家庭,子女忙于工作,父母独自在家,老人有没有出门,外出去到了哪里,有没有偏离 ...

  8. android中高德地图轨迹回放,轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API...

    轨迹回放 html, body, #container { height: 100%; width: 100%; } .input-card .btn{ margin-right: 1.2rem; w ...

  9. 百度地图轨迹回放,自定义路书,边走边画线

    转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线 在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...

最新文章

  1. MySQL数据模型图导出ddl脚本_DB2中导出数据库的所有DDL脚本.
  2. 数据庞大繁杂,如何精简挖掘?
  3. 可用性SLA还不懂?看完这个故事就懂了
  4. createsolidcaret 后 很快就不闪烁了_为什么LED灯会越用越暗?为什么会闪烁?
  5. 实例:用户登录(python 版)
  6. H.323通信协议学习总结
  7. 关于thymeleaf静态资源找不到的问题
  8. WebSocket使用sendObject(Object arg0)向页面方法发送对象
  9. Linux 防火墙配置
  10. 软件测试报告怎么编写,最新软件测试模板推荐【建议收藏】
  11. 谷歌浏览器Vue插件
  12. 搬运:php入门安装教程
  13. Fleck For Web Socket
  14. Java中 VO、 PO、DO、DTO、 BO、 QO、DAO、POJO的概念(转)
  15. java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
  16. win7字体大小怎么设置_怎么设置 win7系统excel2010定时保存和数据恢复的方案 -win7系统使用教程...
  17. 立体匹配---立体匹配过程
  18. 计算机电脑维修 维修不求人,电脑维修不求人:电脑常见故障维修大全及解决方法...
  19. 如何将JSONArray转为String数组
  20. 三人同行七十稀 - 中国剩余定理浅析

热门文章

  1. go build 参数_从0开始Go语言,用Golang搭建网站
  2. plc tcp ip通讯怎么只能连一个客户端_浅谈西门子plc的profinet功能的开放式通信功能...
  3. intranet的计算机环境包括,计算机四级考试网络工程师考点:企业网与Intranet
  4. python中emuterate用法_跨平台模拟执行 - AndroidNativeEmu实用手册
  5. 计算机专业核心技术,计算机系多媒体核心技术实验室建设专业方案(10页)-原创力文档...
  6. 联想p720装系统_分享联想ThinkPad X1 Carbon笔记本最稳的重装WIN10系统方法
  7. springcloud @EnableDiscoveryClient注解作用
  8. 14K Star,「程序员做饭指南」冲上热榜
  9. 牛逼!Python的判断、循环和各种表达式(长文系列第②篇)
  10. 花里胡哨?一起来看看 PyCharm 2019.3 增加了哪些新功能吧