核心提示：高德地图js api轨迹回放多人并且控制谁先播放（代码教程）先附上图片： 一.数据部分function startRun() { //动画方法var ifr = document.getElement...
高德地图js api轨迹回放多人并且控制谁先播放（代码教程）
先附上图片：
一.数据部分
function startRun() { //动画方法
var ifr = document.getElementById('iframeRight');
var targetOrigin = '*';
var json = {
"data": [
{
"dname": "张三",
"dongHua": [
{
"lngX": "117.1419139142",
"latY": "39.1157409540",
"address": "",
"dTime": "2016-12-20 06:00"
},
{
"lngX": "117.181942",
"latY": "39.122237",
"address": "",
"dTime": "2016-12-20 06:30"
},
{
"lngX": "117.183078",
"latY": "39.121749",
"address": "",
"dTime": "2016-12-20 07:00"
}
]
},
{
"dname": "李四",
"dongHua": [
{
"lngX": "117.145848",
"latY": "39.125181",
"address": "",
"dTime": "2016-12-21 17:00"
},
{
"lngX": "117.163214",
"latY": "39.128871",
"address": "",
"dTime": "2016-12-21 17:30"
},
{
"lngX": "117.183853",
"latY": "39.126614",
"address": "",
"dTime": "2016-12-21 18:00"
}
]
}
]
}
var func = { name: "startRun", arg: json }; //传输name名称以及json串
var str = JSON.stringify(func); //将json对象 转成json字符串
ifr.contentWindow.postMessage(str, targetOrigin);
}
二.html部分
<p class="righttopp-Animation">
<p class="righttopp-row" style="text-align: center;">
<select id="select_AnimationPeople">
<!--<option value="0">张三</option>-->
</select>
</p>
<p class="righttopp-row" style="text-align: center;">
<select id="select_speed">
<option value="500">1X</option>
<option value="1500">2X</option>
<option value="2000">3X</option>
<option value="2500">4X</option>
<option value="3000">5X</option>
</select>
</p>
<p class="righttopp-row" onclick="AnimationPlay(this)" style="text-align: center;" title="播 放">
播 放
</p>
<p class="righttopp-row" onclick="AnimationPause(this)" style="text-align:center;" title="暂 停">
暂 停
</p>
<p class="righttopp-row" onclick="AnimationResume(this)" style="text-align:center;" title="继 续">
继 续
</p>
<p class="righttopp-row" onclick="AnimationStop(this)" style="text-align:center;" title="停 止">
停 止
</p>
<p class="righttopp-row" onclick="AnimationClose()" style="text-align:center; border-right:none;" title="关 闭">
关 闭
</p>
</p>
三.js部分
//动画
function startRun(str) { //开始播放动画
mapObj.clearMap();
completeEventHandler(str);
mapObj.setFitView(); //适应地图至居中
$(".righttopp-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: '<p class=\"sanjiao\">' + item1.dname + '</p>',
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: '<p class=\"shequjz_donghua\"><p class=\"maplocation_red\">' + (index + 1) + '</p><p class=\"donghua_time\">' + getTime + '</p></p>', //content: '<p class=\"maplocation_red\">' + (j + 1) + '</p>',
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("righttopp-row-click").siblings(".righttopp-row").removeClass("righttopp-row-click");
}
//暂停播放
function AnimationPause(obj) {
var getIndex = $("#select_AnimationPeople").val();
AnimationMark_Top[getIndex].pauseMove(); //暂停轨迹回放
$(obj).addClass("righttopp-row-click").siblings(".righttopp-row").removeClass("righttopp-row-click");
}
//继续
function AnimationResume(obj) {
var getIndex = $("#select_AnimationPeople").val();
AnimationMark_Top[getIndex].resumeMove(); //继续动画
$(obj).addClass("righttopp-row-click").siblings(".righttopp-row").removeClass("righttopp-row-click");
}
//停止播放 //结束动画播放
function AnimationStop(obj) {
var getIndex = $("#select_AnimationPeople").val();
AnimationMark_Top[getIndex].stopMove(); //结束动画播放
$(obj).addClass("righttopp-row-click").siblings(".righttopp-row").removeClass("righttopp-row-click");
}
//关闭播放
function AnimationClose(obj) {
$(".righttopp-Animation").hide();
mapObj.clearMap();
}
