Actualisation Marker api v3 Google

**Bm.serra** · 09/03/2012, 17h02

Bonjour, dans le cadre d'un projet je dois mettre en place une cartographie avec L'API Google Map V3. Je dois effectuer une localisation de techniciens en temps réel. Pour cela j'ai utilisé une carte api V3 basique avec l'ajout de "markers" tout fonctionne mais il n'y a aucune actualisation a part de recharger la page en complet. Ce que je voudrai, c'est pouvoir avoir une actualisation automatique des "markers" et simplement des "markers"'. Pour cela j'ai utilisé le code suivant mais sans succès...

Cordialement.

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
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 20px;
				padding: 20px;
			}
			#map {
				margin: 20px;
				height: 100%;
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
 
				var Lati = '49.409968' ; 
				var Lon = '6.1518' ; 	
 
 
				function initialisation(){
 
				var myLatlng = new google.maps.LatLng(Lati,Lon);
				var optionsCarte = {
					zoom: 16,
					center: myLatlng,
					mapTypeId: google.maps.MapTypeId.HYBRID
				};
				var myLatlng = new google.maps.Map(document.getElementById("map"), optionsCarte)
				pointeurs();
				var bounds = new google.maps.LatLngBounds();
 
 
			}
				function pointeur(){
 
				var tableauLieux = [
					["Serra",<?php echo $latitudeserra; ?>,<?php echo $longitudeserra; ?>],
					["Palpe",<?php echo $latitudepalpe; ?>,<?php echo $longitudepalpe; ?>]
 
				];
				for (var i = 0; i < tableauLieux.length; i++) {
				var Lieu = tableauLieux[i];
				var pointLieu = new google.maps.LatLng(Lieu[1], Lieu[2]);
				bounds.extend(pointLieu);
				var marqueurLieu = new google.maps.Marker({
					position: pointLieu,
					map: myLatlng,
					title: Lieu[0]
				});
				}
 
				myLatlng.fitBounds(bounds);
 
				}
 
			google.maps.event.addDomListener(window, 'load', initialisation)
 
		</script>
	</head>
	<body>
		<div id="map"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>

**NoSmoking** · 09/03/2012, 23h02

Bonjour,
cela peut passer par une requête, type Ajax, avec une remise à jour des marqueurs en utilisant la méthode setPosition(latlng);.

**Bm.serra** · 10/03/2012, 11h55

Merci de votre réponse, je suis étudiant en BTS informatique et n'ai pas vraiment apprit le java-script /ajax ayant essentiellement fait des langages c /c++ j'ai un peu de mal avec la structure JavaScript si vous pouviez me donner un exemple cela pourrais surement m'aider a comprendre votre propositions..

Cordialement.

**NoSmoking** · 11/03/2012, 19h30

Après chargement de la page, il suffit de lancer une requête au serveur, avec la techno Ajax, pleins d'info sur Ajax, et à réception des infos il suffit de mettre à jour les positions des marqueurs.

Si la base de données coté serveur à évoluée, pour un individu donné, les modifications seront prises en compte.

Cet appel devra être renouvelé après un certains temps, c'est à toi de l'estimer ce temps, via la méthode setTimeout ou setInterval.

Au départ il te faut donc bien définir les structures que tu veux mettre en oeuvre afin de faire coller ton code javascript en conséquence.

Un dernier lien, commence peut être par celui là, http://www.developpez.net/forums/d11...onnees-moment/

**Bm.serra** · 12/03/2012, 20h37

Merci de ta réponse, j'ai travaillé dessus toute la journée en essayant entre autres les méthodes de "inter vals" mais je n'arrive toujours pas a actualiser seulement les "marker" tout en gardant ma carte fixe sur l’arrière plan...

**NoSmoking** · 13/03/2012, 22h17

Envoyé par Bm.serra

...mais je n'arrive toujours pas a actualiser seulement les "marker" tout en gardant ma carte fixe sur l’arrière plan...

il serait bon que tu précises ce que tu entends par garder fixe, cela est-il suite au rechargement complet de la page ou simplement un déplacement de la carte.

**hiba29** · 12/06/2012, 10h59

Bonjour ;

je suis en train de créer une application de suivi (géolocalisation par gps ) j'ai utilisé ce code de NoSmoking pour le déplacent des marker sans que la carte soit rafraîchit , mais il me faut maintenant les relier par des polylignes, pour voir le traçage sans rafraichir la page aussi (exp http://www.instamapper.com/fe?page=demo )

J'espère que vous arriverez à m'aider.
En vous remerciant par avance.

**NoSmoking** · 14/06/2012, 19h21

Bonjour hiba29 et bienvenue sur DVP,

à chaque déplacement d'un marqueur tu ajoutes sa position à la polyline qui si elle est liée à la Map l'affichage se mettra à jour.

**hiba29** · 18/06/2012, 10h20

Bonjour ;

Merci de votre réponse.
Voilà le code que j'ai essayé :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
<title>[Google Maps API V3] Déplacement d'un Marker</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
 
#div_carte{
 
  width : 1080px;
  height: 720px;
 
}  { 'lat' :43.297612, 'lon' : 5.381042},
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tPosition = [
<?php
include('../../connect_base.php');
$requete="select * from traceper_user_was_here where userId=50 ORDER BY Id DESC";
$resultat=mysql_query($requete) or die(mysql_error());
while ($row=mysql_fetch_array($resultat))
{
?>
  { 'lat' :<?php echo $row["latitude"]; ?>, 'lon' :<?php  echo $row["longitude"]; ?>},
<?php
}
?>
 
];
 
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 : 7,
    center : new google.maps.LatLng( 35.33332,09.909424),
    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);
 
 
// TRACAGE PARCOURS CODE EN DUR AVEC FONCTION GOOGLE MAPS POLYLINE()
// LES COORDONNÃ‰ES LAT/LON DOIVENT SE TROUVER DANS UN TABLEAU JAVASCRIPT
// LE DERNIER ELEMENT DU TABLEAU N'EST PAS SUIVI D'UNE VIRGULE !
 
 var tableauPointsPolyline = [
<?php
 
$requete2="select * from traceper_user_was_here where userId=50 ORDER BY Id DESC";
$resultat2=mysql_query($requete2) or die(mysql_error());
while ($row2=mysql_fetch_array($resultat2))
{
?>
new google.maps.LatLng(<?php echo $row2["latitude"]; ?>,<?php  echo $row2["longitude"]; ?>),
<?php
}
?>
 ];
 
 
 
 var optionsPolyline = {
                                        map: oMap,
                                        path: tableauPointsPolyline
                                };
 
// TRACAGE DE LA POLYLIGNE
                                var maPolyline = new google.maps.Polyline(optionsPolyline);
 
 
 
 
 
}
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body onload="initCarte()">
<?php
 
$b=$_GET["id"];
echo $b;
 
?>
    <div id="div_carte"></div>
</body>
</html>

Mais il fait le traçage directement sans suivre le déplacement du marqueur.

.
merci d'avance.

**NoSmoking** · 20/06/2012, 20h57

Il ne te faut pas mettre tous les points dans la polyline tout de suite, il te faut...

Envoyé par NoSmoking

à chaque déplacement d'un marqueur tu ajoutes sa position à la polyline qui si elle est liée à la Map l'affichage se mettra à jour.

**hiba29** · 21/06/2012, 10h29

bonjour

j'ai essayé mais je ne sais pas comment déclarer la fonction path , pour faire le traçage avec le déplacement de marqueur ..
Est ce que vous pouvez me donner un exemple de code svp

Actualisation Marker api v3 Google

APIs Google

Vue hybride

Discussions similaires

Partager

Partager