上回发布的时候，没有对代码进行说明，其实这段代码的主要功能是这样的，根本你从后台所得到的坐标点进行数据展示，并且 有个小动画功能，如下图，当点击开始查看时，可以有一个图标可以是网络的也可以是本地的，进行运动展示你的运动轨迹！ 以下的代码是一个例子，可以拿来在本地跑一下，但需要注意的是，要引入高德的官方依赖的CSS和JS并且需要引用自己的KEY！
//事实上，高德的官方例子比较多的，但是组合用的还是比较少的！
<script>
var marker, lineArr = [];
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 17,
center: [116.397428, 39.90923]
});
marker = new AMap.Marker({
map: map,
position: [116.397428, 39.90923],
icon: "http://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true
});
var lngX = 116.397428, latY = 39.90923;
lineArr.push([116.476801757813, 39.897534179688]);
lineArr.push([116.479412977431,39.90059733073]);
lineArr.push([116.453993055556,39.91728624132]);
lineArr.push([116.41662109375,39.98880560981]);
lineArr.push([116.217746582032,40.22267578125]);
lineArr.push([116.279080946181,40.287308485244]);
lineArr.push([116.279055989584,40.287263454862]);
lineArr.push([116.25820827908,40.283892686632]);
lineArr.push([116.218997124566,40.245851508247]);
// for (var i = 1; i < 4; i++) {
// lngX = lngX + Math.random() * 0.05;
// if (i % 2) {
// latY = latY + Math.random() * 0.0001;
//} else {
// latY = latY + Math.random() * 0.06;
// }
// lineArr.push([lngX, latY]);
// }
// 绘制轨迹
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();
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);
</script>
