API google map

**chamido** · 08/08/2012, 13h42

Bonjour à tous,
J'ai réalisé un code php qui permet d'afficher le déplacement d'un véhicule sur une carte selon un bornage de date.Après la sélection de date et le clique de bouton start,le 1er marqueur se déplace selon les coordonnées de la BDD en laissant au point précédent un 2ème marqueur qui indique la direction de déplacement et en affichant une infobulle en cliquant sur lui.
Mon problème est l'affichage de direction(flèche) n'est pas correct,ainsi que l'affichage de l'infobulle(il affiche des données fausses qui ne correspondent pas au point:lat et long);malgré que l'affichage de 2ème marqueur se fait bien sur les bon points(lat et long) car il est lié au déplacement de 1er marqueur.
voila mon code:

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
<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">
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tPosition = [
<?php
$requete="select * from traceper_user_was_here where dataCalculatedTime >= '".$_POST["example6"]."' AND dataCalculatedTime <= '".$_POST["example66"]."' AND userId='".$_POST["voiture"]."'  ORDER BY Id ASC"; 
$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, trajet){
  iPos++;            // incrémentation;
//   iPos %= nbPoint;   //pas de débordement
 <?php  
$requete="select ExtractValue(ext, '/mileage'),ExtractValue(ext, '/alarm'),latitude,longitude,speed,dataArrivedTime,course from traceper_user_was_here where dataCalculatedTime >= '".$_POST["example6"]."' AND dataCalculatedTime <= '".$_POST["example66"]."' AND userId='".$_POST["voiture"]."' ORDER BY Id ASC";
$resultat=mysql_query($requete) or die(mysql_error());
while ($row=mysql_fetch_array($resultat))
{
?>
var point = new google.maps.LatLng
(<?php echo $row["latitude"]; ?>,<?php  echo $row["longitude"]; ?>)
<?php
require("direction.php"); 
require("speed.php"); 
require("switch_alarm.php"); 
?>
var oMarker = new google.maps.Marker({
    'position' : marker.getPosition(),
	  icon: "<?php echo $image; ?>",  // position du marker en cours
      'map': marker.getMap()              // map du marker en cours
    }); 
// fin de la construction des marker
 
// Encore quelques fonctions google maps pour ajouter un infobulle lors d'un clic sur un marqueur
google.maps.event.addListener(oMarker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
  content: '',
  size: new google.maps.Size(50,50),
position:point
});
  //infowindow.open(map, marker);
  infowindow.open(marker.getMap(), this);
<?php
$requete3="SELECt chauffeur FROM  traceper_users WHERE Id=".$_POST["voiture"];
$resultat3=mysql_query($requete3) or die(mysql_error());
while ($chauf=mysql_fetch_array($resultat3))
{
	$chauffeur=$chauf["chauffeur"];
}
?> 
 infowindow.setContent('Driver :'+<?php  echo "'".$chauffeur."'"; ?>+'<br>Date :'+<?php  echo "'".$row["dataArrivedTime"]."'"; ?>+'<br/>Speed :'+<?php  echo $speed1; ?>+' km/h<br/>Mileage :'+<?php  echo $mileage1; ?>+' km<br/>Alarm :'+<?php  echo "'".$alarm."'"; ?>+'');
});	 
<?php
}
?>
 
 
  // recup. du point a traiter
  var point = new google.maps.LatLng( tPosition[iPos].lat, tPosition[iPos].lon);
  // deplace le marker
  marker.setPosition( point);
  // centre la carte
  marker.getMap().panTo( point);
  // ajout point dans polyline
  trajet.getPath().push( point);
  // rappel de la fonction
  setTimeout( function(){
      movePositionMarker( marker, trajet);
    }, 3000);
}
 
function initCarte(){
  // init
  var oMap, oMarker;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  true,
    streetViewControl : true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.DEFAULT
    },
    zoom : 15,
    center : new google.maps.LatLng( 36.8187673,10.1660442),
    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),
	icon: "marker.png",
    map : oMap
  });
 
 
 // creation de la polyline
var oPolyline = new google.maps.Polyline({
	strokeColor: '#9999CC',
	strokeWeight: 5,
    'map': oMap
									    });
  movePositionMarker(oMarker,oPolyline);
 
  }
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>    
 
<!-- normalement fin head -->    
 
<?php
}
if(isset($_POST["calculer"]))
{
?>
<span style="margin-left:635px;">
<b>d&eacute;part: </b>
<input type="text" id="adrDep" value="" style="width:150px;">
<input type="button" value="recherche" name="debut" onClick="rechercher('adrDep',true)">
<b>arriv&eacute;e: </b>
<input type="text" id="adrArr" value="" style="width:150px;">
<input type="button" value="recherche" name="fin" onClick="rechercher('adrArr',false)">
</span>
<div id="div_carte" style="width : 1210px;  height: 720px;"></div>
<?php
}
else
{
?>
<div id="div_carte" style="width : 1210px;  height: 752px;"></div>
<?php
}
?>

J’espère bien que qlqu'un peut m'aider,j'ai passé beaucoup de temps à tester le code sans comprendre où réside l'erreur.

Merci d'avance.

**chamido** · 10/08/2012, 10h44

Bonjour,
voilà le code initial que j'ai utilisé.Le problème réside dans l'affichage de l'infobulle:les données dans l'infobulle n'appartiennent pas à son marqueur, de plus lorsqu'on clique plusieurs fois sur le même marqueur,l''infobulle change.

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
<!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>[Google Maps API V3] Déplacement d'un Marker</title>
<meta name="Author" content="NoSmoking">
<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' :48.856667, 'lon' : 2.350987},
  { 'lat' :44.837368, 'lon' :-0.576144},
  { 'lat' :43.297612, 'lon' : 5.381042}
];
 
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
  var oMarker = new google.maps.Marker({
      'position' : marker.getPosition(),  // position du marker en cours
      'map': marker.getMap()              // map du marker en cours
    });
 
	// Encore quelques fonctions google maps pour ajouter un infobulle lors d'un clic sur un marqueur
google.maps.event.addListener(oMarker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
  content:'',
  size: new google.maps.Size(50,50),
  position:point
 
});
 //infowindow.open(map, marker);
  infowindow.open(marker.getMap(), this);
  infowindow.setContent('latitude :'+tPosition[iPos].lat+'<br>longitude :'+tPosition[iPos].lon+'');
});	 
 
 
  // 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);
  // 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 : 6,
    center : new google.maps.LatLng( 46.80, 1.75),
    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
  });
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>[Google Maps API V3] Déplacement d'un Marker</h1>
    <div id="div_carte"></div>
  </div>
</div>
</body>
</html>

SVP,qlqu'un peut m'aider

Merci.

API google map

Bibliothèques et frameworks PHP

Discussions similaires

Partager

Partager