Géocodage inverse avec ajax

**zakizac** · 04/06/2014, 07h27

Bonjour,

J'ai un programme qui me récupère des variables de localisation (lat, lon) à partir de ma base de données. Avec Ajax => à chaque fois que mes données changent, la position se rafraîchit automatiquement sur ma page. Les véhicules s'affichent grâce à des Markers.

Je voudrais faire une Infowindow qui me fait le géocodage inverse et qui affiche le nom du lieu grâce aux coordonnées du marker (lat, lon). Par ex : France, paris.

Mais il se trouve qu'elle m'affiche le nom du lieu juste une fois et quand la position du marker change, le nom du lieu reste le même
même si je change carrément de pays.

Voici le code de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Sachant que l'actualisation de la position marche très bien, et que les info window s'affichent devant le marker associé,
c'est juste le contenu de ces dernières qui me pose probléme pour l'instant.

Merci pour vos reponses.

**NoSmoking** · 08/06/2014, 10h50

Bonjour,

pourquoi oInfo[i - 1] ? dans la fonction actualiserPage().

Pose toi également la question de ce que vaut i à l'appel de la fonction et surtout à son retour!

Géocodage inverse avec ajax

APIs Google

Vue hybride

Discussions similaires

Partager

Partager