经纬度经过处理, 仅供轨迹展示。
<!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="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
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>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key"></script>
<script>
var i = 0;
var arr = [[125.28994737413196, 43.82706456163194], [125.28994737413196, 43.82700021701389], [125.28996343315973, 43.825981011284725], [125.28997949218748, 43.82555989583334], [125.29000629340278, 43.82431260850694], [125.29000368923612, 43.8242080078125], [125.29004654947917, 43.822295572916666], [125.29012977430554, 43.82205154079861], [125.29012977430554, 43.82205154079861], [125.290234375, 43.8222392578125], [125.29016731770832, 43.82443337673611], [125.29037651909724, 43.824446723090276], [125.29094509548611, 43.8236474609375], [125.21724066840277, 43.876457465277774], [125.21724066840277, 43.876457465277774], [125.21375651041667, 43.87683029513889], [125.21356336805556, 43.876690863715275], [125.21363042534722, 43.876666666666665], [125.21793001302083, 43.87622146267361], [125.21914507378472, 43.87609266493055], [125.21923893229166, 43.876081922743055], [125.21983441840277, 43.87602560763889], [125.22296994357639, 43.87571983506945], [125.28988563368054, 43.82903602430555], [125.28989366319445, 43.82865776909722], [125.28990169270833, 43.8283466796875], [125.28992588975696, 43.82776736111111], [125.28994737413196, 43.82706456163194], [125.28994737413196, 43.82700021701389], [125.28996343315973, 43.825981011284725], [125.28997949218748, 43.82555989583334], [125.29000629340278, 43.82431260850694], [125.29000368923612, 43.8242080078125], [125.29004654947917, 43.822295572916666], [125.29012977430554, 43.82205154079861], [125.29012977430554, 43.82205154079861], [125.290234375, 43.8222392578125], [125.29016731770832, 43.82443337673611], [125.29037651909724, 43.824446723090276], [125.29094509548611, 43.8236474609375], [125.21724066840277, 43.876457465277774], [125.21724066840277, 43.876457465277774]];
var marker, lineArr = [arr[0]];
console.log(lineArr);
var map = new AMap.Map("container", {
resizeEnable: true,
center: arr[0],
zoom: 17
});
marker = new AMap.Marker({
map: map,
// position: [116.478935,39.997761],
position: arr[0],
icon: "https://webapi.amap.com/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 interval = setInterval("getPoint()",1000);
function getPoint(){
if(i> arr.length-2)return;
var line = [];
line.push(arr[i]);
i ++;
line.push(arr[i]);
console.log(line);
// lineArr.push(arr[i]);
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: line,
showDir:true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
// var interval = setInterval("getPoint()",5000);
marker.moveAlong(line,200);
// setInterval(getPoint(),5000);
}
function startAnimation () {
marker.moveAlong(lineArr, 200);
}
function pauseAnimation () {
marker.pauseMove();
}
function resumeAnimation () {
marker.resumeMove();
}
function stopAnimation () {
marker.stopMove();
}
</script>
</body>
</html>