Géolocalisation de véhicule gmap3 et ajax

**zakizac** · 28/04/2014, 16h08

bonjour tout le monde ; en fait j'ai un petit souci ; je doi realiser une appplication de geolocalisation ; je doi suivre le deplacemen d'un vehicule en temps réel; sachan que ce vehicule dispose d'un module gsm gprs; la question n'est pas la; j'ai un souci coté site web
jai une base de donnée qui contient les position de 2 ou 3 vehicules par exemple alor on a pour chaque vehicule :
id-lat-long-date-vitesse-direction
je doi afficher ces donnée sur une carte google map; mai il se trouve ke la position des vehicules change
donc pour chaque vehicule chaque 1/10 seconde la "lat" et "long" et la "vitesse"changent(au niveau de la base de donnée); alor je voudrais afficher le deplacement de ces vehicules sans avoir a rafraichir la page,
jé le code pour sa mais jaffiche le deplacemen (lat-long) de poin ke je mé sur ma propre page et moi je voudrais le faire a partir des (lat-long) de la base de donnée ; bien sur en utilisan ajax et le xmlhttprequest;
si quelqun pourrais m'aider je lui serais tré reconnaissant
merci bcp d'avance
voici le code que j'utilise

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>DEPLACEMENT DU VEHICULE</title>
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding : 0;
  font-family : Verdana, Arial;
  font-size : 1em;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
#page {
  padding : 0.5em;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_carte{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
  border : 1px solid #c0c0c0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tPosition = [
  { 'lat' :45.767299, 'lon' : 4.834329},
  { 'lat' :45.767299, 'lon' : 4.844329},
  { 'lat' :45.767299, 'lon' : 4.854329},
  { 'lat' :45.767299, 'lon' : 4.864329},
  { 'lat' :45.767299, 'lon' : 4.874329},
  { 'lat' :45.767299, 'lon' : 4.884329},
  { 'lat' :45.767299, 'lon' : 4.894329},
  { 'lat' :45.767299, 'lon' : 4.904329},
  { 'lat' :45.767299, 'lon' : 4.914329},
  { 'lat' :45.767299, 'lon' : 4.924329},
  { 'lat' :45.767299, 'lon' : 4.934329},
  { 'lat' :45.767299, 'lon' : 4.944329},
  { 'lat' :45.767299, 'lon' : 4.954329},
  { 'lat' :45.767299, 'lon' : 4.964329},
  { 'lat' :45.767299, 'lon' : 4.974329},
  { 'lat' :45.767299, 'lon' : 4.984329},
  { 'lat' :45.767299, 'lon' : 4.994329},
  
];
 
var nbPoint = tPosition.length;
var iPos = 0;
 
function movePositionMarker( marker){
  iPos++;            // incrémentation;
  iPos %= nbPoint;   // pas de débordement
 
  // déplace le marker
  marker.setPosition( new google.maps.LatLng( tPosition[iPos].lat, tPosition[iPos].lon));
 
  // rappel de la fonction
  setTimeout( function(){
      movePositionMarker( marker);
    }, 1000);
}
 
function initCarte(){
  // init
  var oMap, oMarker;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  false,
    streetViewControl : false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    zoom : 9,
    center : new google.maps.LatLng( 45.76, 4.99),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // creation de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"), mapOptions);
  // creation du marqueur
  oMarker = new google.maps.Marker({
    position : new google.maps.LatLng( tPosition[0].lat, tPosition[0].lon),
    map : oMap
  });
  movePositionMarker( oMarker);
}
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="div_main">
    <h1>DEPLACEMENT</h1>
    <div id="div_carte"></div>
  </div>
</div>
</body>
</html>

map.html

**NoSmoking** · 28/04/2014, 16h24

Bonjour,
et qu'a donné une petite recherche !?!

Script Ajax api googlemap

**zakizac** · 29/04/2014, 00h37

je vais essayer avec sa et on verra si j'ai des difficultés; mercii bcp

**zakizac** · 29/04/2014, 05h45

voila ce que j'ai pu faire pour l'instant, mais je crois que c pa ce que je veu à la fin
parce que si les donnée change dans la base de donnée je devrais reactualiser la page c sa ?
et moi je veux que sa se passe automoatiquement, dés que les positions changent dans la base de donnée
ces derniers sont affiché sur la carte sans avoir a la rafraichir
...
et mercii d'avance

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>geolocalisation LSI</title>
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding : 0;
  font-family : Verdana, Arial;
  font-size : 1em;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
#page {
  padding : 0.5em;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_carte{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
  border : 1px solid #c0c0c0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tPosition = [
 <?php
mysql_connect("localhost","root","") or die ("impossible dese connecter:".mysql_error());
mysql_select_db("test");
$requete='SELECT * FROM position1 ORDER BY id DESC';
$resultat=mysql_query($requete) or die(mysql_error());
while ($row=mysql_fetch_array($resultat))
{
?>
  { 'lat' :<?php echo $row["lat"]; ?>, 'lon' :<?php  echo $row["long"]; ?>},
<?php
}
?>
 
];
 
var nbPoint = tPosition.length;
var iPos = 0;
 
function movePositionMarker( marker, trajet){
  iPos++;            // incrémentation;
  iPos %= nbPoint;   // pas de débordement
 
 /* cretaion d'un nouveau marqueur pour laisser u ne trace du deplacement
  /var oMarker = new google.maps.Marker({
      'position' : marker.getPosition(),  // position du marker en cours
      'map': marker.getMap()              // map du marker en cours
    });
	*/
 
 
  // recup. du point a traiter
  var point = new google.maps.LatLng( tPosition[iPos].lat, tPosition[iPos].lon);
 
  // deplace le marker
  marker.setPosition( point);
  // ajout point dans polyline
  trajet.getPath().push( point);
 
 
//pour pouvoir suivre la carte avec la voiture  
 // marker.getMap().panTo( point);
 
 
 
  // rappel de la fonction
  setTimeout( function(){
      movePositionMarker( marker, trajet);
 
    }, 1000);
}
 
 
function initCarte(){
  // init
  var oMap, oMarker;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  false,
    streetViewControl : false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    zoom : 10,
    center : new google.maps.LatLng( 45.767299, 4.834329),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // creation de la carte
  oMap = new google.maps.Map(document.getElementById("div_carte"), mapOptions);
  // creation du marqueur
  oMarker = new google.maps.Marker({
    position : new google.maps.LatLng( tPosition[0].lat, tPosition[0].lon),
    map : oMap,
	icon: "vp.png",
	'title' : "ma voiture"
  });
 
      // création infobulle
 oInfo = new google.maps.InfoWindow({
      });
   // événement clic sur le marker
    google.maps.event.addListener( oMarker, 'click', function() {
        // affectation du contenu
      oInfo.setContent( '<center>position :<br>' + tPosition[0].lat+ '   ,   ' + tPosition[0].lon);
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
	   });
 
 
var oPolyline = new google.maps.Polyline({
    'map': oMap
  });
  movePositionMarker( oMarker,oPolyline);
}
 
// init lorsque la page est chargee
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>
</div>
</body>
</html>

**NoSmoking** · 29/04/2014, 19h15

...dés que les positions changent dans la base de donnée

tu ne pourras pas, avec la techno utilisée, le faire.

Il te faut faire un appel à intervalle régulier de ta base et mettre à jour si il y a eu une modification.

La technique Ajax, comme tu as du le lire si tu as trainé du coté de Les meilleurs cours et tutoriels pour apprendre l'AJAX, te permettra de na pas recharger la page mais de mettre à jour uniquement les données que tu souhaites.

**zakizac** · 12/05/2014, 02h40

resalut c encore moi , merci pour la derniére reponse, j'ai un peu etudier le ajax, jai effectué un appel ajax a intervalle regulier, et j'ai pu l'afficher dan une page html, mais je n'ai pa reussi a le mettre dan me carte pour que le marqueur se deplace au changement des positions dans la base de données !!
voila le programme que j'ai utilisé pour sa :

index.html :

Code html :

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
<!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" />
  <title>geolocalisation</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
 
  <script type="text/javascript" src="fonctionsAjax.js"></script>
  <script type="text/javascript" src="fonctionsMachine.js"></script>
 
</head>
<body>
  <div id="page"> 
   <!--zone du résultat-->
    <div id="info">{ lat = <span id="lat"></span>&nbsp;,lon = <span id="lon"></span>&nbsp;}</div>
   <!--zone du chargeur-->
    <img id="charge" src="chargeur.gif"  />
 </body>
</html>

position.php

Code php :

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
<?php
session_start();
//indique que le type de la réponse renvoyée au client sera du Texte
header("Content-Type: text/plain ; charset=utf-8");
//anti Cache pour HTTP/1.1
header("Cache-Control: no-cache , private");
//anti Cache pour HTTP/1.0
header("Pragma: no-cache");
//simulation du  temps d'attente du serveur (2 secondes)
sleep(0.5);
mysql_connect("localhost","root","") or die ("impossible dese connecter:".mysql_error());
mysql_select_db("test");
$requete='SELECT * FROM position1 where id=1 ORDER BY id DESC';
$resulta=mysql_query($requete) or die(mysql_error());
while ($row=mysql_fetch_array($resulta)){
$latt=$row["lat"];
$longg=$row["long"];
$resultat=$latt.':'.$longg;
echo $resultat ;
}
?>

fonctionAjax.js

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
// JavaScript Document
 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;
}
//------------Fonctions de gestion du DOM (solution alternative à innerHTML)
function remplacerContenu(id, texte) {
  var element = document.getElementById(id);
  if (element != null) {
    supprimerContenu(element);
    var nouveauContenu = document.createTextNode(texte);
    element.appendChild(nouveauContenu);
  }
}
 
function supprimerContenu(element) {
if (element != null) {
    while(element.firstChild)
        element.removeChild(element.firstChild);
   }
}
//--------------Fonctions encodage
//code en UTF8, la valeur d'un élément dont id passé en parametre
function codeContenu(id) { 
	var valeur=document.getElementById(id).value;
	return encodeURIComponent(valeur);
}

fonctionMachine.js

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
// JavaScript Document
window.onload=testerNavigateur;
//-----------------------------
function testerNavigateur() { 
    objetXHR = creationXHR();
	if(objetXHR==null) {
		var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
		remplacerContenu("info", erreurNavigateur);
	    document.getElementById("info").style.visibility="visible";
		return null
	}
	//démarrage de l'affichage automatique du cumul des gains
		jouer();
}
 
function jouer() {   
 
	 //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
	 //gestion du bouton et du chargeur
	 document.getElementById("charge").style.visibility="visible";
     objetXHR.send(null);//envoi de la requete
	 setTimeout("jouer()",1000);//timer de 6 s
	 /*---------------------------------------- */
  }
  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 
	   //actualisation du résultat
	   remplacerContenu("lat", decodeURI(nouveauResultat[1]));
	   //actualisation du nom
	   remplacerContenu("lon", decodeURI(nouveauResultat[0]));
	   //affiche la zone info
	   document.getElementById("info").style.visibility="visible";
 
	   //gestion du bouton et du chargeur
	   document.getElementById("charge").style.visibility="hidden";
	 }else{
	   //message d'erreur serveur
	   var erreurServeur="Erreur serveur : "+objetXHR.status+" – "+ objetXHR.statusText;
	   remplacerContenu("info", erreurServeur);
	   document.getElementById("info").style.visibility="visible";
	   //gestion du bouton et du chargeur
	   document.getElementById("charge").style.visibility="hidden";
	   //annule la requete en cours
	   objetXHR.abort();
	   objetXHR=null;
	   }
	 }
  }

je voudrais juste savoir comment faire pour les afficher sur la carte directement, genre l'endroi ou inserer la carte et le marker, parceque sa na pa marché pour moi
et mercii beaucoup

**zakizac** · 12/05/2014, 02h45

Nom : Sans titre.png
Affichages : 785
Taille : 119,0 Ko

voila un apercu de ce que sa m'afficher , et mercii

**zakizac** · 12/05/2014, 14h22

Nom : Sans titre2.png
Affichages : 822
Taille : 373,5 Ko

voila j'ai la position qui m'arrive chaque 1 seconde sous forme de
lat : lon
et je decode pour recuperer le lat tout seul é le lon tout seul
mais aprés sa
je sais pas comment faire pour actualiser le marker
merci de m'aider la dessus

**NoSmoking** · 25/05/2014, 15h43

Envoyé par html

var nouveauResultat = objetXHR.responseText.split(":");

d'après ton code cela présume que tu récupères une chaine de caractère avec 2 parties, une avant et une après les :, ce qui n'a pas l'air d'être le cas dans la capture que tu montres { lat = 4,834329, lon= 45.767299 }.

**zakizac** · 26/05/2014, 02h05

oui les latt et lonn j'essayai de les ramené en dehor de ma fonction je savé pa ske je fesé -_-
mais aprés je recuperé le resultat de split ; j'ai modifié la reponse du php a "lat,lon"
et aprés :

Code :

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

1
2
3
 
var latt=nouveauResultat[1]
var lonn=nouveauResultat[2]

**zakizac** · 26/05/2014, 02h11

mais en fait sa a marché finalemen
sa m'a pri du temps mais sa a marché
j'ai crée un marquer au debut du programme js avec une valeur "null"
et avec "marker.setposition" je changeai sa valeur a chaque foi que j'ai une reponse en php apartir de la base
mais j'ai helas un autre souci pour afficher l'historique de deplacement avec PHP
je vais crée une discussion pour sa
mercii beaucoup pour votre aide

Géolocalisation de véhicule gmap3 et ajax

APIs Google

Discussions similaires

Partager

Partager