-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.html
173 lines (142 loc) · 6.43 KB
/
map.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Author" value="Abdul Rasheed Tutakhail"/>
<!--Collegamento al file CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Chiave del Google Maps -->
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TracciaSat</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg" type="text/javascript"></script>
<!--Collegamento al mapiconmaker.js per creare markers dinamici -->
<script src="mapiconmaker.js" type="text/javascript"></script >
<script type="text/javascript">
//<![CDATA[
<!--1000 markers insieme con il numero corrispondente vengono create -->
var customIcons = [1000];
for(var j=0;j<1000;j++){
var iconOptions = {};
iconOptions.primaryColor = "#0000FF";
iconOptions.strokeColor = "#000000";
iconOptions.label = j.toString().replace();
iconOptions.labelColor = "#000000";
iconOptions.addStar = false;
iconOptions.starPrimaryColor = "#FFFF00";
iconOptions.starStrokeColor = "#0000FF";
customIcons[j] = MapIconMaker.createLabeledMarkerIcon(iconOptions);
}
function isANumber( n ) {
var numStr = /^-?(\d+\.?\d*)$|(\d*\.?\d+)$/;
return numStr.test( n.toString() );
}
function load() {
var ide=encodeURIComponent(document.getElementById("id").value)
var ysdate=encodeURIComponent(document.getElementById("ysdate").value)
var msdate=encodeURIComponent(document.getElementById("msdate").value)
var dsdate=encodeURIComponent(document.getElementById("dsdate").value)
var yedate=encodeURIComponent(document.getElementById("yedate").value)
var medate=encodeURIComponent(document.getElementById("medate").value)
var dedate=encodeURIComponent(document.getElementById("dedate").value)
<!--Codice di Validazione del Form -->
if(isANumber(ysdate) && isANumber(yedate) && isANumber(msdate) && isANumber(medate) && isANumber(dsdate) && isANumber(dedate) ){
if (ysdate<0 || ysdate>=2100)
{
alert("Il valore nel campo Anno del Data Iniziale non è valido");
return false;
}
else if (msdate<0 || msdate>12)
{
alert("Il valore nel campo Mese del Data Iniziale non è valido");
return false;
}
else if (msdate==2 && dsdate>28)
{
alert("Il mese di Febbraio ha 28 giorni, correggi il Campo Giorno del Data Iniziale");
return false;
}
else if (dsdate<0 ||dsdate>31)
{
alert("Il valore nel campo Giorno del Data Iniziale non è valido");
return false;
}
else if (yedate<0 || yedate>=2100)
{
alert("Il valore nel campo Anno del Data Finale non è valido");
return false;
}
else if (medate<0 || medate>12)
{
alert("Il valore nel campo Mese del Data Finale non è valido");
return false;
}
else if (medate==2 && dedate>28)
{
alert("Il mese di Febbraio ha 28 giorni, correggi il Campo Giorno del Data Finale");
return false;
}
else if (dedate<0 ||dedate>31)
{
alert("Il valore nel campo Giorno del Data Finale non è valido");
return false;
}}
else{
alert("Solo valori numerici possono essere introdotti nei campi di Date");
}
<!--La mappa si concentra sulla posizione con Longitudine e Latitudine precisata nella funzione GlatLng con l'avvio di funzione Load() -->
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.110654076756994, 12.386398315429688), 13, G_HYBRID_MAP);
<!--GDownloadUrl prende come parametro il file che produce in output XML secondo i dati contenuti nel Database, Gli vengono passati i dati ottenuti dal Form del utente -->
GDownloadUrl("second.php?strt="+ysdate+"/"+msdate+"/"+dsdate+"&end="+yedate+"/"+medate+"/"+dedate+"&id="+ide, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var IMEI = markers[i].getAttribute("IMEI");
var Velocity = markers[i].getAttribute("Velocity");
var Ora = markers[i].getAttribute("Ora");
var Data = markers[i].getAttribute("Data");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, IMEI, Velocity, Ora, Data, i);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, IMEI, Velocity, Ora, Data, i) {
var marker = new GMarker(point, customIcons[i]);
var html = "<b>" + "Ora: " + "</b>" + Ora + "<br/>" + "<b>" + "Data: " + "</b>"+ Data + "<br/>" + "<b>" + "Velocità: " + "</b>" + Velocity + " km/h" ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html); });
return marker;
}
//]]>
</script>
</head>
<!--La mappa di Google -->
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 1000px; height: 350px; left: 123px; align:center; "></div>
<!--Form del Utente -->
<div id="stylized" class="myform">
<form id="form" name="form" method="get" action="">
<h1>TracciaSat</h1>
<label>IMEI
<span class="small">(Composto da 15 cifre)</span>
</label>
<input type="text" name="id" id="id" /></br></br>
<label>Data Iniziale
<span class="small">(YYYY/MM/DD)</span>
</label>
<input type="text" id="ysdate" name="ysdate" size="3" value="2000" /> <input type="text" id="msdate" name="ysdate" size="1" /> <input type="text" id="dsdate" name="dsdate" size="1" /> </br></br>
<label>Data Finale
<span class="small">(YYYY/MM/DD)</span>
</label>
<input type="text" id="yedate" name="yedate" size="3" /> <input type="text" id="medate" name="medate" size="1" /> <input type="text" id="dedate" name="dedate" size="1" /> </br></br>
<button type="button" onClick="load()">Traccia</button>
<div class="spacer"></div>
</form>
</div>
</body>
</html>