上回發(fā)布的時(shí)候，沒(méi)有對(duì)代碼進(jìn)行說(shuō)明，其實(shí)這段代碼的主要功能是這樣的，根本你從后臺(tái)所得到的坐標(biāo)點(diǎn)進(jìn)行數(shù)據(jù)展示，并且 有個(gè)小動(dòng)畫(huà)功能，如下圖，當(dāng)點(diǎn)擊開(kāi)始查看時(shí)，可以有一個(gè)圖標(biāo)可以是網(wǎng)絡(luò)的也可以是本地的，進(jìn)行運(yùn)動(dòng)展示你的運(yùn)動(dòng)軌跡！ 以下的代碼是一個(gè)例子，可以拿來(lái)在本地跑一下，但需要注意的是，要引入高德的官方依賴的CSS和JS并且需要引用自己的KEY！
//事實(shí)上，高德的官方例子比較多的，但是組合用的還是比較少的！
<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>
