高德地图之轨迹回放

最近项目中有需要做车辆的轨迹回放功能，在这里就给打分享一下还是挺简单的。
<!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】大家一起讨论技术。
后面会不定时为大家更新文章，敬请期待。
高德地图之轨迹回放

喜欢的朋友可以关注下。

猜你喜欢
