高德地图js api 轨迹回放多人并且控制谁先播放

先附上图片：

一.数据部分

二.html部分

三.js部分

//动画
function startRun(str) { //开始播放动画
mapObj.clearMap();
completeEventHandler(str);
mapObj.setFitView(); //适应地图至居中
$(".righttopdiv-Animation").show();
}

var AnimationMark_Top = [];
var AnimationLineArr_Top = [];
function completeEventHandler(str) {
var lngX = "";
var latY = "";
$.each(str.data, function (index1, item1) {
var index2 = index1 + 1;
var AnimationLineArr_1 = [];

//设置动画图标position的起点
var arr_first = GPS.gcj_encrypt(parseFloat(item1.dongHua[0].latY), parseFloat(item1.dongHua[0].lngX));
var firstlngX = arr_first.lon.toFixed(6);
var firstlatY = arr_first.lat.toFixed(6);
var AnimationMark_1 = new AMap.Marker({
map: mapObj,
position: [firstlngX, firstlatY],
icon: "images/latshishi2.png", //marker图标，直接传递地址url
//content: '<div class=\"sanjiao\">' + item1.dname + '</div>',
offset: new AMap.Pixel(-11, -10), //相对于基点的位置
autoRotation: true //根据线点自动转换方向
});
AnimationMark_Top.push(AnimationMark_1); //将加的

//向 select选项卡中赋值人名以及序号
$("#select_AnimationPeople").append("<option value=\"" + index1 + "\">" + item1.dname + "</option>");

//遍历当前人的坐标点
$.each(item1.dongHua, function (index, item) {
lngX = parseFloat(item.lngX);
latY = parseFloat(item.latY);
var arr_dongHua = GPS.gcj_encrypt(latY, lngX);
lngX = arr_dongHua.lon.toFixed(6);
latY = arr_dongHua.lat.toFixed(6);
AnimationLineArr_1.push(new AMap.LngLat(lngX, latY));
var getTime = item.dTime; //截取时间
getTime = getTime.substring(getTime.length - 5, getTime.length);
//加上带有时间的图标标记
var marker_jz = new AMap.Marker({
map: mapObj,
content: '<div class=\"shequjz_donghua\"><div class=\"maplocation_red\">' + (index + 1) + '</div><div class=\"donghua_time\">' + getTime + '</div></div>', //content: '<div class=\"maplocation_red\">' + (j + 1) + '</div>',
position: new AMap.LngLat(lngX, latY),
offset: new AMap.Pixel(-8, -10) //相对于基点的位置
});
marker_jz.setMap(mapObj); //在地图上添加点
});

AnimationLineArr_Top.push(AnimationLineArr_1); //向总的数值赋值
//console.log(AnimationLineArr_Top);
//绘制轨迹
var polyline = new AMap.Polyline({
map: mapObj,
path: AnimationLineArr_1,
strokeColor: "#f13323",//线颜色
strokeOpacity: 1,//线透明度
strokeWeight: 2,//线宽
strokeStyle: "solid",//线样式
});
});
}

//当选择人员时时，让动画暂定播放
$("#select_AnimationPeople").change(function () {
$.each(AnimationMark_Top, function (index, item) {
item.pauseMove(); //暂停动画播放
});
});
//当点击select速度值时，让动画暂定播放
$("#select_speed").change(function () {
$.each(AnimationMark_Top, function (index, item) {
item.pauseMove(); //暂停动画播放
});
});
//播放按钮
function AnimationPlay(obj) {
var getSpeed = $("#select_speed").val();
var getIndex = $("#select_AnimationPeople").val();
AnimationMark_Top[getIndex].moveAlong(AnimationLineArr_Top[getIndex], getSpeed);//开始轨迹回放
$(obj).addClass("righttopdiv-row-click").siblings(".righttopdiv-row").removeClass("righttopdiv-row-click");
}
//暂停播放
function AnimationPause(obj) {
var getIndex = $("#select_AnimationPeople").val();
AnimationMark_Top[getIndex].pauseMove(); //暂停轨迹回放
$(obj).addClass("righttopdiv-row-click").siblings(".righttopdiv-row").removeClass("righttopdiv-row-click");
}
//继续
function AnimationResume(obj) {
var getIndex = $("#select_AnimationPeople").val();
AnimationMark_Top[getIndex].resumeMove(); //继续动画
$(obj).addClass("righttopdiv-row-click").siblings(".righttopdiv-row").removeClass("righttopdiv-row-click");
}
//停止播放 //结束动画播放
function AnimationStop(obj) {
var getIndex = $("#select_AnimationPeople").val();
AnimationMark_Top[getIndex].stopMove(); //结束动画播放
$(obj).addClass("righttopdiv-row-click").siblings(".righttopdiv-row").removeClass("righttopdiv-row-click");
}
//关闭播放
function AnimationClose(obj) {
$(".righttopdiv-Animation").hide();
mapObj.clearMap();
}

高德地图js api 轨迹回放 多人并且控制谁先播放

相关推荐

高德地图js api 轨迹回放多人并且控制谁先播放