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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>geolocalisation LSI</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//*******************************************************************************************************************************
var marker1 = [];
var map = null;
var mapOptions = null;
var oPolyline=null;
var oInfo=[];
var tPosition1,tPosition2,tPosition3=null;
var geocoder;
// JavaScript Document creaton de la fonction XHR du xml http request
function creationXHR() {
var resultat=null;
try {//test pour les navigateurs : Mozilla, Opéra, ...
resultat= new XMLHttpRequest();
}
catch (Error) {
try {//test pour les navigateurs Internet Explorer > 5.0
resultat= new ActiveXObject("Msxml2.XMLHTTP");
}
catch (Error) {
try {//test pour le navigateur Internet Explorer 5.0
resultat= new ActiveXObject("Microsoft.XMLHTTP");
}
catch (Error) {
resultat= null;
}
}
}
return resultat;
}
//pour tester le navigateur
function testerNavigateur() {
objetXHR = creationXHR();
if(objetXHR==null) {
var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
return null
}
}
//recuperer les valeurs de lat et lon au chargement de la page
var tPosition = [
<?php
mysql_connect("localhost","root","") or die ("impossible de se connecter:".mysql_error());
mysql_select_db("geoloc");
$requete='SELECT * FROM positions where id_client=1 ORDER BY id ASC';
$resultat=mysql_query($requete) or die(mysql_error());
while ($row=mysql_fetch_array($resultat))
{
?>
{ 'lat' :<?php echo $row["lati"]; ?>, 'lon' :<?php echo $row["longi"]; ?>},
<?php
}
?>
];
// ********************************************************************************************************************************
// envoi de la requete qui demande la position actuelle + effacer le cache pour eviter les erreur d'affichage
function movePositionMarker(){
//création d'un objet XHR multi-navigateurs
objetXHR = creationXHR();
var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
//construction de la chaine des parametres
var parametres = "&anticache="+temps ;
//Config. objet XHR
objetXHR.open("get","position.php?"+parametres, true);
objetXHR.onreadystatechange = actualiserPage;//désignation de la fonction de rappel
objetXHR.send(null);//envoi de la requete
}
// ********************************************************************************************************************************
// deplace le marker selon les nouvelles coordonnées ramenés directement de la base
function actualiserPage() {
if (objetXHR.readyState == 4) {//test si le résultat est disponible
if (objetXHR.status == 200) {
var nouveauResultat = objetXHR.responseText.split("*");//recup du résulat > tableau
var myLatLngtab = new Array();
for (var i = 0;i < nouveauResultat.length-1; i++){
marker1[i].setVisible(true); // le marker est invisible au chargement de la page
var ii= decodeURI(nouveauResultat[i]).split(":");//recup du résulat > tableau
var pos=new google.maps.LatLng(decodeURI(ii[0]),decodeURI(ii[1]));
myLatLngtab.push(pos);
// deplace le marker
marker1[i].setPosition(myLatLngtab[i]);
// evennement click sur le marker
google.maps.event.addListener( marker1[i], 'click', function() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng':myLatLngtab[this.numero] }, function(results, status) {
oInfo[i-1].setContent(results[1].formatted_address);
oInfo[i-1].open(map, marker1[i]);
});
/* affectation du contenu
oInfo[i-1].setContent( '<center>position :<br>'+myLatLngtab[this.numero].toUrlValue(5));
affichage InfoWindow
oInfo[i-1].open( this.getMap(), marker1[i]);
});
*/
});
//pour pouvoir suivre la carte avec la voiture
//marker.getMap().panTo(myLatlng1);
}
}
}
}
// ********************************************************************************************************************************
// la fonction qui initialise la carte et met les données a afficher directement aprés le chargement de la page
function initCarte(){
// init************************************************
mapOptions = {
backgroundColor : '#fff',
mapTypeControl : true,
streetViewControl : true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
zoom : 2,
center : new google.maps.LatLng(35,-0.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//***********************************************************************************************************************
// creation de la carte*************************************************************************************************
map = new google.maps.Map(document.getElementById("div_carte"), mapOptions);
// creation du marqueur**************************************************************************************************
var Info = new google.maps.InfoWindow();
for (var i=0; i<tPosition.length;i++)
{
marker = new google.maps.Marker({
'numero' : i,
position: new google.maps.LatLng(tPosition[i].lat, tPosition[i].lon),
map: map,
title: "ma voiture -"+i,
icon: "vp"+i+".png"
});
marker1.push( marker); // stock le marker
marker1[i].setVisible(false); // le marker est invisible au chargement de la page
// création infobulle***********************************************************************************
// événement clic sur le marker
google.maps.event.addListener( marker1[i], 'click', function() {
// affectation du contenu
Info.setContent( '<center>position :<br>'+tPosition[this.numero].lat+','+tPosition[this.numero].lon);
// affichage InfoWindow
Info.open( this.getMap(), this);
});
oInfo.push( Info);
}
window.setInterval("movePositionMarker()",4000); //intervalle d'actualisation de la fonction de déplacement
}
// init lorsque la page est chargee*************************************************************
// executer la fonction d'initialisation de la carte
google.maps.event.addDomListener(window, 'load', initCarte);
//*************************************************************************************************************************************************
</script>
</head>
<body>
<div id="page">
<div id="div_main">
<h1 align=center>geolocalisation LSI</h1>
<div id="div_carte"></div>
</div>
<nav>
<h2><p><a href="javascript:PopupWindow(this,'ecrit22.php');"> <strong>ajouter,modifier<strong></a><p></h2>
</nav>
</div>
</body>
</html> |
