-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
350 lines (323 loc) · 12.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=y8IwZyDYb4t8D5iAkEekdC5jHbGKu0ID"></script>
<title>Title</title>
</head>
<body>
<div>
<div class="headmessg">
<label class="label" id="name"></label>
<label class="label" id="city"></label>
请选择回放轨迹时间：
开始时间：<input class="input" type="datetime-local" id="startTime" placeholder="请选择起始时间">
结束时间：<input class="input" type="datetime-local" id="endTime" placeholder="请选择结束时间">
<button class="button" type="button" onclick="loadTrackByTime()">开始回放</button>
<span id="realTime"></span>
</div>
<div id="allmap" >
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*my97时间选择控件--开始*/
var md=""; //第二个输入框最大值的全局变量
//第一个输入框选择好日期的时候操作
function pickedFunc(){
var Y=$dp.cal.getP('y');
var M=$dp.cal.getP('M');
var D=$dp.cal.getP('d');
var H=$dp.cal.getP('H');
var M1=$dp.cal.getP('m');
var S=$dp.cal.getP('s');
H=parseInt(H)+2;//相差只能是两小时
M=parseInt(M)-1;
D=parseInt(D);
H=parseInt(H);
M1=parseInt(M1);
S=parseInt(S);
var d = new Date();
d.setFullYear(Y,M,D); //设置时间
d.setHours(H,M1,S);
var nowDate=new Date();
//跟现在的时间比较，如果算出来的值大于现在时间，修改全局变量md为现在时间。否则为算出来的时间。
if(nowDate<=d){
md="";
}else{
var month=d.getMonth()+1; //月份的范围是（0到11）;
md=d.getFullYear()+"-"+month+"-"+d.getDate()+" "+H+":"+M1+":"+S; //直接把d给过去会有问题，所以拼成字符串发过去
}
}
//第一个清空的时候的操作
function clearedFunc(){
md= "";
}
//给第二个输入框定义规则
function picker2rule(ele){
if(md == ""){
WdatePicker({el:ele,minDate:'#F{$dp.$D(\'datepicker1\')}',maxDate:'%y-%M-%d %H:%m:%s',dateFmt:'yyyy-MM-dd HH:mm:ss'});
}else{
WdatePicker({el:ele,minDate:'#F{$dp.$D(\'datepicker1\')}',maxDate:md,dateFmt:'yyyy-MM-dd HH:mm:ss'});
}
}
/*my97时间选择控件--结束*/
</script>
<script type="text/javascript">
var map;
var donePoints = [];
var bPoints = [];
var timerArr = [];//定时器
var interval;
$(document).ready(function () {
checkLogin();
});
//检查用户有没有登录
var checkLogin = function () {
var name = common.getCookie("username");
if(name==null){
alert("无登陆信息，或登录已经过期，请登录！");
window.location.href = "/main/login/login.php";
}else{
$("#name").html("您好！" + name + "用户，欢迎您！");
loadJScript();
}
}
//加载百度地图
var loadJScript = function () {
map = new BMap.Map("allmap");
var point = new BMap.Point(108.983487,34.383831);
map.centerAndZoom(point,17);
map.enableScrollWheelZoom();//滚轮放大缩小
/*function myFun(result){
var cityName = result.name;
map.setCenter(cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);*/
$("#city").html("西安市");
};
//根据时间选择
function loadTrackByTime() {
//清空当前所有的定时器和地图上的覆盖物。
map.clearOverlays();
for(var t = 0;t<timerArr.length;t++){
clearTimeout(timerArr[t]);
};
timerArr = [];
clearInterval(interval);
bPoints.length = 0;
donePoints.length = 0;
var dateBegin = document.getElementById("startTime").value.replace("T"," ");
var dateEnd = $("#endTime").val();
//从原始数组中查询符合条件的坐标点
var param = {
id: common.getCookie("id"),
dateBegin: dateBegin,
dateEnd: dateEnd
}
var searchRes = [];
common.jsonAjax("/main/getLocation.php", param, function (data) {
//满足条件的放上去。
for(var i in data){
searchRes.push(data[i]);
}
trackTime(dateBegin);
for(var j=0;j<searchRes.length;j++){
var wait = dateDiff(searchRes[j].time,dateBegin)*1000;
(function () {
var pointAg = [searchRes[j]], timer;
timer = setTimeout(function () {
var doneLen = donePoints.length;
var linePoints = [];
donePoints.push(pointAg[0]);
addLine(donePoints); //把原始数据的轨迹线添加到地图上。
addMarker(pointAg);
bPoints.push(new BMap.Point(pointAg[0].lng, pointAg[0].lat));
setZoom(bPoints);
}, wait);
timerArr.push(timer);
})();
/*if(j==searchRes.length-1){
setTimeout("alert('该时间段内所有的GPS信号回放结束！')", wait + 2000);
}*/
};
}, false);
}
//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
function setZoom(bPoints){
var view = map.getViewport(eval(bPoints));
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint,mapZoom);
}
//在轨迹点上创建图标，并添加点击事件，显示轨迹点信息。points,数组。
function addMarker(points){
var pointsLen = points.length;
if(pointsLen == 0){
return;
}
var myIcon1 = new BMap.Icon("/jpg/bigtrack3.png", new BMap.Size(10, 10), {
offset: new BMap.Size(10, 10)
});
var myIcon2 = new BMap.Icon("/jpg/bigtrack.ico", new BMap.Size(10, 10), {
offset: new BMap.Size(10, 10)
});
var myIcon3 = new BMap.Icon("/jpg/bigtrack1.png", new BMap.Size(10, 10), {
offset: new BMap.Size(10, 10)
});
var marker1;
var marker2;
// 创建标注对象并添加到地图
for(var i = 0;i <pointsLen;i++){
var point = new BMap.Point(points[i].lng,points[i].lat);
var thePoint = points[i];
if(points[i].carId==1){
marker1 = new BMap.Marker(point, {icon: myIcon1});
map.addOverlay(marker1);
marker1.addEventListener("click",function(){
showInfo(this,thePoint);
});
}else if(points[i].carId == 2){
marker2 = new BMap.Marker(point, {icon: myIcon2});
map.addOverlay(marker2);
marker2.addEventListener("click",function(){
showInfo(this,thePoint);
});
}else if(points[i].carId == 3){
var marker3 = new BMap.Marker(point, {icon: myIcon3});
map.addOverlay(marker3);
marker3.addEventListener("click",function(){
showInfo(this,thePoint);
});
};
}
}
//点击轨迹点后显示信息窗口
function showInfo(thisMaker,point){
var sContent =
"<ul style='margin:0 0 5px 0;padding:0.2em 0'>"
+"<li style='line-height: 26px;font-size: 15px;'>"
+"<span style='width: 50px;display: inline-block;'>id：</span>" + point.id + "</li>"
+"<li style='line-height: 26px;font-size: 15px;'><span style='width: 50px;display: inline-block;'>状态：</span>"+point.time +"</li>"
+"<li style='line-height: 26px;font-size: 15px;'><span style='width: 50px;display: inline-block;'>速度：</span>"+point.speed +"米/秒"+"</li>"
+"</ul>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
thisMaker.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow
}
//添加线
function addLine(points) {
var linePoints1 = [];
var linePoints2 = [];
var linePoints3 = [];
var pointsLen = points.length;
if (pointsLen == 0) {
return;
}
// 创建标注对象并添加到地图
for (var i = 0; i < pointsLen; i++) {
if (points[i].carId == 1) {
linePoints1.push(new BMap.Point(points[i].lng, points[i].lat));
} else if (points[i].carId == 2) {
linePoints2.push(new BMap.Point(points[i].lng, points[i].lat));
} else if (points[i].carId == 3) {
linePoints3.push(new BMap.Point(points[i].lng, points[i].lat));
}
}
/* alert("1:"+JSON.stringify(linePoints1)+"2:"+JSON.stringify(linePoints2)+"3:"+JSON.stringify(linePoints3));*/
var polyline1 = new BMap.Polyline(linePoints1, {strokeColor: "#0101DF", strokeWeight: 2, strokeOpacity: 0.5}); //创建折线
map.addOverlay(polyline1); //增加折线
var polyline2 = new BMap.Polyline(linePoints2, {strokeColor: "#B40404", strokeWeight: 2, strokeOpacity: 0.5}); //创建折线
map.addOverlay(polyline2); //增加折线
var polyline3 = new BMap.Polyline(linePoints3, {strokeColor: "#20AE49", strokeWeight: 2, strokeOpacity: 0.5}); //创建折线
map.addOverlay(polyline3); //增加折线
}
//显示轨迹运行的时间
function trackTime(beginTime) {
var beginTimestamp = Date.parse(new Date(beginTime));
interval = setInterval(function () {
var time = getDate(beginTimestamp).time;
document.getElementById('realTime').innerHTML = '回放时间' + time;
beginTimestamp = beginTimestamp+1000;
},1000);
}
//根据时间戳（毫秒），返回处理过后的时间。
function getDate(ms){
var res;
if(ms!=undefined){
var today = new Date()
today.setTime(ms);
}else{
var today = new Date();
}
var year,month,day,hour,minute,second;
year = today.getFullYear();
month = today.getMonth() + 1;
if(month<10){
month = '0'+month;
}
day = today.getDate();
if(day<10){
day = '0'+day;
}
hour = today.getHours();
if(hour<10){
hour = '0'+hour;
}
minute = today.getMinutes();
if(minute<10){
minute = '0'+minute;
}
second = today.getSeconds();
if(second<10){
second = '0'+second;
}
res={
'y':year,
'M':month,
'd':day,
'h':hour,
"m":minute,
"s":second,
"time":year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second,
"date":year+"-"+month+"-"+day
}
return res;
}
//求时间差的方法
function dateDiff(date1, date2){
var type1 = typeof date1, type2 = typeof date2;
if(type1 == 'string')
date1 = stringToTime(date1);
else if(date1.getTime)
date1 = date1.getTime();
if(type2 == 'string')
date2 = stringToTime(date2);
else if(date2.getTime)
date2 = date2.getTime();
return (date1 - date2) / 1000;//结果是秒
}
//字符串转成Time(dateDiff)所需方法
function stringToTime(string){
var f = string.split(' ', 2);
var d = (f[0] ? f[0] : '').split('-', 3);
var t = (f[1] ? f[1] : '').split(':', 3);
return (new Date(
parseInt(d[0], 10) || null,
(parseInt(d[1], 10) || 1)-1,
parseInt(d[2], 10) || null,
parseInt(t[0], 10) || null,
parseInt(t[1], 10) || null,
parseInt(t[2], 10) || null
)).getTime();
}
</script>