forked from liusaint/baiduMap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
trackback.html
335 lines (284 loc) · 9.66 KB
/
trackback.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轨迹回放</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%;}
.input-date{
padding: 10px 20px;
}
.input-date input{
height: 30px;
}
.input-note{
line-height: 30px;
font-size: 12px;
padding-left: 20px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=YWdGplhYjUGQ3GtpKNeuTM2S"></script>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<div class="input-date">
<input type="text" id="datepicker1" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datepicker2\')||\'new Date()\'}',minDate:'#F{$dp.$D(\'datepicker2\',{H:-2})}',onpicked:pickedFunc,oncleared:clearedFunc,dateFmt:'yyyy-MM-dd HH:mm:ss'})" placeholder="开始时间">
<input type="text" id="datepicker2" onfocus="picker2rule(this)" placeholder="结束时间">
<input type="button" onclick="loadTrackByTime()" value="轨迹回放">
<span id="realTime"></span>
</div>
<div class="input-note">输入2015-11-25 14:00:00至2015-11-25 16:00:00。或2015-11-24 14:00:00至2015-11-24 16:00:00</div>
<div id="container"></div>
<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">
// 实时轨迹demo。 轨迹回放功能。
// 实际运用的话可能ajax实时读取后台数据，加载到地图上。
//工具函数
// 获取随机数
//数据准备
var points = [
{"lng":116,"lat":40,"id":8,"time":"2015-11-25 14:00:01"},
{"lng":117,"lat":31,"id":2,"time":"2015-11-25 14:00:11"},
{"lng":116,"lat":34,"id":3,"time":"2015-11-25 14:00:22"},
{"lng":118,"lat":39,"id":4,"time":"2015-11-25 14:00:15"},
{"lng":110,"lat":35,"id":5,"time":"2015-11-25 14:00:05"},
{"lng":119,"lat":43,"id":5,"time":"2015-11-24 14:00:05"},
{"lng":108,"lat":31,"id":5,"time":"2015-11-24 14:00:15"},
{"lng":112,"lat":35,"id":5,"time":"2015-11-24 14:00:17"}
];
var donePoints = [];//已经显示的点。
var bPoints = [];//保存百度化的坐标组。用于重设地图的中心点和显示级别。
var timerArr=[];//定时器
var interval;
//地图操作开始
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5); //初始显示中国。
map.enableScrollWheelZoom();//滚轮放大缩小
//根据时间选择。
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('datepicker1').value;
var dateEnd = document.getElementById('datepicker2').value;
//从原始数组中查询符合条件的坐标点。
var pointsLen = points.length;
var searchRes = [];//用来装符合条件的坐标信息。
//满足条件的放上去。
for (var i = 0; i < pointsLen; i++) {
if(dateDiff(points[i].time,dateBegin)>0&&dateDiff(points[i].time,dateEnd)<0){
searchRes.push(points[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 = [];
if(doneLen!=0){
linePoints.push(donePoints[doneLen-1]);
}
linePoints.push(pointAg[0]);
donePoints.push(pointAg[0]);
addLine(linePoints); //把原始数据的轨迹线添加到地图上。
addMarker(pointAg);
bPoints.push(new BMap.Point(pointAg[0].lng,pointAg[0].lat));
setZoom(bPoints);
},wait);
timerArr.push(timer);
})();
};
}
function getRandom(n){
return Math.floor(Math.random()*n+1)
}
//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
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 myIcon = new BMap.Icon("bigtrack.ico", new BMap.Size(10, 10), {
offset: new BMap.Size(10, 10)
});
// 创建标注对象并添加到地图
for(var i = 0;i <pointsLen;i++){
var point = new BMap.Point(points[i].lng,points[i].lat);
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
(function() {
var thePoint = points[i];
marker.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>"
+"</ul>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
thisMaker.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow
}
//添加线
function addLine(points){
var linePoints = [];
var pointsLen = points.length;
if(pointsLen == 0){
return;
}
// 创建标注对象并添加到地图
for(var i = 0;i <pointsLen;i++){
linePoints.push(new BMap.Point(points[i].lng,points[i].lat));
}
var polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //创建折线
map.addOverlay(polyline); //增加折线
}
//显示轨迹运行的时间
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>
</body>
</html>