高德地图之轨迹回放-低调大师

高德地图之轨迹回放

2018-12-19 824

最近项目中有需要做车辆的轨迹回放功能，在这里就给打分享一下还是挺简单的。

<!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】大家一起讨论技术。

后面会不定时为大家更新文章，敬请期待。

喜欢的朋友可以关注下。

微信关注我们

原文链接：https://yq.aliyun.com/articles/680802

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

威胁快报| ThinkPHP v5 新漏洞攻击案例首曝光，阿里云已可告警并拦截

2018年12月10日，ThinkPHP v5系列发布安全更新，修复了一处可导致远程代码执行的严重漏洞。阿里云态势感知已捕获多起基于该漏洞的真实攻击，并对该漏洞原理以及漏洞利用方式进行分析。现在，对于云上未及时进行系统更新的用户，阿里云态势感知已提供攻击告警，WAF产品支持同步拦截，目前云上客户基本未受到影响。此次漏洞由ThinkPHP v5框架代码问题引起，其覆盖面广，且可直接远程执行任何代码和命令。电子商务行业、金融服务行业、互联网游戏行业等网站使用该ThinkPHP框架比较多，需要格外关注。阿里云是仅有少数的捕获到该漏洞整个攻击链的云服务商。下面我们对其漏洞背景，攻击原理和行为进行全面分析，并提供真实案列分析。漏洞分析由于ThinkPHP v5框架对控制器名没有进行足够的安全检测，导致在没有开启强制路由的情况下，黑客构造特定

2018-12-20

691

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 链的方式提供了网关基本...

2018-12-20

608

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。