高德地圖JavaScript根據後臺座標點繪製軌跡
專案中用到所以看了一下，可以完善之處請指正
<script type="text/javascript">
//這裡可以傳入後臺的json資料，類似此格式
var pointList=[
{
lng:116.397428,
lat:39.90923
},
{
lng:116.397428,
lat:39.90923
},
{
lng:116.397428,
lat:39.90923
},
{
lng:116.397428,
lat:39.90923
}
];
var a_mark; //圖示點
var marker;
var lineArr;
map = new AMap.Map("map_container", {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 14
});
map.plugin(["AMap.ToolBar"],function(){
//載入工具條
var tool = new AMap.ToolBar();
map.addControl(tool);
});
//地圖圖塊載入完畢後執行函式
function completeEventHandler(x,y){
marker3 = new AMap.Marker({
map:map,
//draggable:true, //是否可拖動
position:new AMap.LngLat(x,y),//基點位置
icon:"http://code.mapabc.com/images/car_03.png", //marker圖示，直接傳遞地址url
offset:new AMap.Pixel(-26,-13), //相對於基點的位置
autoRotation:true
});
var lngX ;
var latY ;
lineArr = new Array();
for(var i = 1;i<pointList.length;i++){
lngX = pointList[i].lng;
latY = pointList[i].lat;
lineArr.push(new AMap.LngLat(lngX,latY));
}
//繪製軌跡
var polyline = new AMap.Polyline({
map:map,
path:lineArr,
strokeColor:"#00A",//線顏色
strokeOpacity:1,//線透明度
strokeWeight:3,//線寬
strokeStyle:"solid",//線樣式
});
}
function startRun(){ //開始繪製軌跡
x=pointList[0].lng;
y=pointList[0].lat
completeEventHandler(x,y);
marker.moveAlong(lineArr,80); //開始軌跡回放
}
function init(){
/* $.ajax({
type: "post",
url: _gPath+"你的資料.json",
success: function(resp){
$.each(resp, function(i,n){
pointList = resp.data;
});
}
}); */
startRun();
}
$(document).ready(function(){
init();
});
</script>