高德地图-行政范围+根据坐标轨迹回放

上回发布的时候，没有对代码进行说明，其实这段代码的主要功能是这样的，根本你从后台所得到的坐标点进行数据展示，并且 有个小动画功能，如下图，当点击开始查看时，可以有一个图标可以是网络的也可以是本地的，进行运动展示你的运动轨迹！ 以下的代码是一个例子，可以拿来在本地跑一下，但需要注意的是，要引入高德的官方依赖的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>