高德地图之轨迹回放
最近项目中有需要做车辆的轨迹回放功能,在这里就给打分享一下还是挺简单的。
<!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 href="styles/NewGlobal.css" rel="stylesheet" /> <link rel="stylesheet" href="css/gaode_main1119.css" /> <link rel="stylesheet" type="text/css" href="css/ui.css"> <!-- <link type="text/css" rel="stylesheet" href="css/sale-list.css" /> --> <link rel="stylesheet" href="css/demo-center.css"/> <script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script> <style> html, body, #container { height: 98%; width: 100%; } .input-card .btn{ margin-right: 1.2rem; width: 9rem; } .input-card .btn:last-child{ margin-right: 0; } </style> </head> <body> <div id="container"></div> <div class="input-card" style="margin-bottom:45px"> <div style="" align="center"><span id="tsid" style="font-size: 14px"></span></div> <h4>轨迹回放控制</h4> <div class="input-item"> <input type="button" class="btn" style="width: 25%" value="今天" id="start1" onclick="gettrack('1')"/> <input type="button" class="btn" style="width: 25%" value="昨天" id="start2" onclick="gettrack('2')"/> <input type="button" class="btn" style="width: 25%" value="前天" id="start3" onclick="gettrack('3')"/> <input type="button" class="btn" value="开始回放" id="start" onclick="startAnimation()"/> <input type="button" class="btn" value="暂停回放" id="pause" onclick="pauseAnimation()"/> </div> </div> <div class="aui-l-content" style="width:100%;margin: 0 auto; bottom: 0px; position: fixed;"> <div class="aui-menu-list aui-menu-list-clear"> <ul> <li class="b-line"> <a href="new_index.html"> <div class="aui-icon"><img src="images/icon-home/my-in2.png"></div> <h3>返回主页</h3> <div class="aui-time"><i class="aui-jump"></i></div> </a> </li> </ul> </div> </div> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key="></script> <script> var marker, lineArr=new Array(),tishiArr=new Array(); $(function(){ var h = document.documentElement.clientHeight || document.body.clientHeight; $("#container").css("height", h-52-77-12-50); tomap(); }) //lineArr数组为历史回顾的GPS点 function tomap(){ var map = new AMap.Map("container", { resizeEnable: true, center: [104.04, 30.40], zoom: 14 }); map.clearMap(); // 清除地图覆盖物 marker = new AMap.Marker({ map: map, position: lineArr[0], icon: "images/car.png", offset: new AMap.Pixel(-26, -13), autoRotation: true, angle:-90, }); // 绘制轨迹 var polyline = new AMap.Polyline({ map: map, path: lineArr, showDir:true, strokeColor: "#28F", //线颜色 // strokeOpacity: 1, //线透明度 strokeWeight: 6, //线宽 // strokeStyle: "solid" //线样式 }); var passedPolyline = new AMap.Polyline({ map: map, // path: lineArr, strokeColor: "#AF5", //线颜色 // strokeOpacity: 1, //线透明度 strokeWeight: 6, //线宽 // strokeStyle: "solid" //线样式 }); marker.on('moving', function (e) { passedPolyline.setPath(e.passedPath); }); map.setFitView(); } var i=0; var t1; var k=0; function addinfo(){ $("#tsid").html(tishiArr[i]); i=i+1; if(i>tishiArr.length){ clearInterval(t1); i=0; } } //开始 function startAnimation () { if(lineArr.length>0){ if(k>0){ marker.resumeMove(); }else{ marker.moveAlong(lineArr, 350); } t1=window.setInterval(addinfo, 500); } } //继续 function pauseAnimation () { k=1; clearInterval(t1); if(lineArr.length>0){ marker.pauseMove(); } } // function resumeAnimation () { marker.resumeMove(); } //停止 function stopAnimation () { if(lineArr.length>0){ marker.stopMove(); } } </script> </body> </html>
上个图吧这里:
是不是就是很简单的操作。
如有需要可以加我Q群【308742428】大家一起讨论技术。
后面会不定时为大家更新文章,敬请期待。
喜欢的朋友可以关注下。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
威胁快报| ThinkPHP v5 新漏洞攻击案例首曝光,阿里云已可告警并拦截
2018年12月10日,ThinkPHP v5系列发布安全更新,修复了一处可导致远程代码执行的严重漏洞。阿里云态势感知已捕获多起基于该漏洞的真实攻击,并对该漏洞原理以及漏洞利用方式进行分析。现在,对于云上未及时进行系统更新的用户,阿里云态势感知已提供攻击告警,WAF产品支持同步拦截,目前云上客户基本未受到影响。 此次漏洞由ThinkPHP v5框架代码问题引起,其覆盖面广,且可直接远程执行任何代码和命令。电子商务行业、金融服务行业、互联网游戏行业等网站使用该ThinkPHP框架比较多,需要格外关注。阿里云是仅有少数的捕获到该漏洞整个攻击链的云服务商。下面我们对其漏洞背景,攻击原理和行为进行全面分析,并提供真实案列分析。 漏洞分析 由于ThinkPHP v5框架对控制器名没有进行足够的安全检测,导致在没有开启强制路由的情况下,黑客构造特定
- 下一篇
Spring Cloud 终于按捺不住推出了自己的服务网关 Gateway
Spring 官方最终还是按捺不住推出了自己的网关组件:Spring Cloud Gateway ,相比之前我们使用的 Zuul(1.x) 它有哪些优势呢?Zuul(1.x) 基于 Servlet,使用阻塞 API,它不支持任何长连接,如 WebSockets,Spring Cloud Gateway 使用非阻塞 API,支持 WebSockets,支持限流等新特性 Spring Cloud Gateway Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等技术开发的网关,它旨在为微服务架构提供一种简单有效的统一的 API 路由管理方式。 Spring Cloud Gateway 作为 Spring Cloud 生态系统中的网关,目标是替代 Netflix Zuul,其不仅提供统一的路由方式,并且基于 Filter 链的方式提供了网关基本...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS关闭SELinux安全模块
- Hadoop3单机部署,实现最简伪集群
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2更换Tomcat为Jetty,小型站点的福音