Déplacement automatique de marqueur avec traçage

**hiba29** · 28/06/2012, 17h54

Bonjour à tous,
J'ai ce code qui fait le déplacement automatique d'un marqueur avec le traçage.J'ai trouvé ce 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
<!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
 
  // 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>

maintenant je veux que lorsque le marqueur se déplace,il laisse un autre marqueur sur le point précédent pour afficher infobulle.

Merci d'avance.

**NoSmoking** · 29/06/2012, 18h41

Bonjour,
sur le principe cela est tout simple.
- avant de mouvoir le marqueur mobile, on récupère la position de celui ci
- création d'un nouveau marqueur auquel on affecte la position relevée
- déplacement du marqueur mobile
...etc..

Pour ce faire il te faut modifier la fonction movePositionMarker

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
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
    });
 
  // 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);
}

**hiba29** · 30/06/2012, 21h19

merci beaucoup sa marche

**hiba29** · 02/07/2012, 09h07

Bonjour

Merci beaucoup encore une fois , mais la carte ne se déplace pas avec le marqueur ..
j'aimerais centrer ma carte google map sur mon marker.
cet marker provient des coordonnées gps stockées dans une base de données Mysql.

j'ai utilisé cette fonction mais elle fait le déplacement une seule fois même si on ajoute plusieurs points

..

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
function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
 
  google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    window.setTimeout(function() {
      map.panTo(new google.maps.LatLng(37.4569, -122.1569));
    }, 1000);
  });
}

**NoSmoking** · 02/07/2012, 18h45

pour centrer la carte sur le nouveau marker il faut le faire dans la fonction de déplacement.

Code :

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

1
2
3
4
5
6
  // 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);

par exemple.

**hiba29** · 03/07/2012, 09h00

Merci beaucoup pour votre aide

ça fonctionne bien..

Déplacement automatique de marqueur avec traçage [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager