轨迹回放代码演示 - 51Testing软件测试论坛

<!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 rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.5&key=6202c32e3dccbecd6d7251d9f396db30&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.MouseTool,AMap.ToolBar"></script>
<script type="text/javascript" src="http://139.224.44.115:8010/Resource/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" value="开始动画" id="start"/>
<input type="button" class="button" value="暂停动画" id="pause"/>
<input type="button" class="button" value="继续动画" id="resume"/>
<input type="button" class="button" value="停止动画" id="stop"/>
<input type="button" class="button" value="卡车中心位置" id="adjustment"/>
<input type="button" class="button" value="定时器移动卡车中心位置" id="timer"/>
</div>
<script>
var marker, lineArr = [];
var map = new AMap.Map("container", {
resizeEnable: true,
center: [115.397428, 38.90923],
zoom: 18
});
//卡车图片
var truck = "http://139.224.44.115:8010/Resource/images/truck.png";
//起始位置图片
var start = "http://139.224.44.115:8010/Resource/images/icons/startAddr.png";
//结束位置图片
var end = "http://139.224.44.115:8010/Resource/images/icons/EndAddr.png";
var images = truck;
marker = new AMap.Marker({
map: map,
position: [115.397428, 38.90923],
icon: new AMap.Icon({
size: new AMap.Size(50, 50), //图标大小
image: truck
}) ,
offset: new AMap.Pixel(-26, -13),
autoRotation: false//图片是否自动旋转
});
//设置起点地图设置一个起点图标
var startPosition = [115.397428, 38.90923];
//设置终点地图设置一个终点图标
var endPosition = [117.397428, 40.90923];
markerStart = new AMap.Marker({
position: startPosition,
icon: start,
offset: new AMap.Pixel(-25, -30)
});
markerEnd = new AMap.Marker({
position: endPosition,
icon: end,
offset: new AMap.Pixel(-25, -30)
});
markerStart.setMap(map);
markerEnd.setMap(map);
//假设当前位置的经纬度
//var lngX = 116.397428, latY = 39.90923;
//lineArr.push([lngX, latY]);
//从数据库中获取当前位置之前的所有经纬度的数组
var lineArr = [
[115.397428, 38.90923],
[116.397428, 39.90923],
[117.397428, 40.90923]
];
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
strokeColor: "#00A", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: map,
// path: lineArr,
strokeColor: "#F00", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
// strokeStyle: "solid" //线样式
});
marker.on('moving',function(e){
passedPolyline.setPath(e.passedPath);
})
//map.setFitView();//不要这句话就默认为map定义的zoom等级，不然就根据路线长度定义zoom等级
//需要设置中心点实时改变,不然会很难看，如果固定zoom的等级设定为最大数字的话。
AMap.event.addDomListener(document.getElementById('start'), 'click', function() {
marker.moveAlong(lineArr, 500);
}, false);
AMap.event.addDomListener(document.getElementById('pause'), 'click', function() {
marker.pauseMove();
}, false);
AMap.event.addDomListener(document.getElementById('resume'), 'click', function() {
marker.resumeMove();
}, false);
AMap.event.addDomListener(document.getElementById('stop'), 'click', function() {
marker.stopMove();
}, false);
AMap.event.addDomListener(document.getElementById('adjustment'), 'click', function() {
//marker.getPosition();//获取卡车当前经纬度
var markerPosition =marker.getPosition();
map.panTo(markerPosition);//地图中心点平移至指定点位置
}, false);
AMap.event.addDomListener(document.getElementById('timer'), 'click', function() {
var timerArr = [];
for(var i = 0;i<lineArr.length;i++){
timerArr.push(lineArr[i]);
var timer=window.setInterval(function(){
var markerPosition =marker.getPosition();
map.panTo(markerPosition);
},10000); //定时器
}
marker.moveAlong(timerArr, 500);
//地图中心点平移至指定点位置
var timer=window.setInterval(function(){
var markerPosition =marker.getPosition();
map.panTo(markerPosition);
},1000); //定时器
}, false);
</script>
</body>
</html>

复制代码