Réinitialisation de marqueurs

Version imprimable

Bonjour,

Je souhaite réinitialiser les marqueurs affichés sur ma carte lorsque j'actionne un événement Jquery qui appelle ma base de donnée.

Je souhaiterais que les marqueurs affichés sur ma carte disparaissent et que les nouveaux apparaissent. Or je n'arrive à rien, j'ai tenté de les supprimer avec la technique setMap et setOptions, ca fonctionne mais impossible de faire apparaitre les nouveaux. Je recherche la bonne technique sur internet mais je m'en sors pas. Quelqu'un pourrait-il me donner un coup de main?

Voici mon code actuel sans tentative de réinitialisation:
Code:

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 ('.day').click(function(){ var date=$('#date').val(); $.post( 'connexion.php', // Mon fichier cible côté serveur. 'date=' + date, function (data){ var it=data.lat; for(var i=0,I=it.length;i<I; i++){ var markers=[[data.dj[i],data.lat[i],data.lng[i]],]; // Récupération des données sélectionnées en fonction de ma date addmarker(markers[i]); // Affichage des marqueurs } function addmarker(latlng){ var lat=data.lat[i]; var lng=data.lng[i]; marker = new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), map: map, }); } }, 'json' ); }); }

Bonjour,
je ne vois pas de gestion des markers...par exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
var tabMarkers = []; // pour stockage des marqueurs crées
/*
*  désaffecte et supprime les marqueurs
*/
function clearMarkers(){
  var i, nb = tabMarkers.length;
  for( i=0; i < nb; i++){
    tabMarkers[i].setMap(null);
  }
  tabMarkers = [];
}

il te suffit ensuite de "clearer" les marqueurs avant la création de nouveaux, cela pourrait donner

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
clearMarkers();
for (var i = 0, I = it.length; i < I; i++) {
  var markers = [ [data.dj[i], data.lat[i], data.lng[i]], ]; // Récupération des données sélectionnées en fonction de ma date
  addmarker(markers[i]); // Affichage des marqueurs
}
 
function addmarker(latlng) {
  var lat = data.lat[i];
  var lng = data.lng[i];
  var oMarker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
  });
  tabMarkers.push( oMarker);
 
}

PS: j'ai un peu de mal à comprendre la boucle

J'essaye de faire une gestion de marqueurs comme tu me l'as conseillé. Je fais un "clear" sur eux, mais je n'arrive à rien. J'ai le même problème lorsque je clique les anciens marqueurs ne s'effacent pas.

Pour ce qui est de la boucle elle me sert à inscrire mes données dans mon tableau markers=[], de façon ordonnée.

Mon code a probablement de quoi être amélioré. J'ai du mal à tout comprendre, je tourne en rond car j'ai l'impression que ce code serait censé fonctionner.

Voici où j'en suis (pas beaucoup plus loin):

Code:

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
 
$('.day').click(function(){
 
    var date=$('#date').val();
    $('#resultat').html(date);
 
    var markers=[];
    function clearMarkers(){
        var i, nb = markers.length;
        for( i=0; i < nb; i++){
             markers[i].setMap(null);
        }
     markers = [];
     }
 
clearMarkers();
 
$.post(
    'connexion.php', // Mon fichier cible côté serveur.
	'date=' + date, 
	function (data){
 
	    var it=data.lat; //variable me permettant de récupérer la longueur max de mon indentation
 
	    for(var i=0,I=it.length;i<I; i++){ 
		 markers=[[data.dj[i],data.lat[i],data.lng[i]],]; // Récupération des données Json en tableau ordonné
 
		     addmarker(markers[i]);		  // Affichage des marqueurs
	        }
 
		function addmarker(latlng){
			var lat=data.lat[i];
			var lng=data.lng[i];
			var marker = new google.maps.Marker({
			  position: new google.maps.LatLng(lat,lng),
			  map: map,
			});
			markers.push(marker);  //(je ne comprend pas l'action de ".push")
 
   		        var infowindow = new google.maps.InfoWindow();
 
                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
		            map.setZoom(8);
		            map.setCenter(marker.getPosition());
                            infowindow.setContent(data.dj[i]);
                            infowindow.open(map, marker);
                           }
                        })(marker, i));
 
	       }
 
	   },
	'json'
	);
});

Ton appel à clearMarker est mal positionné dans ton code il doit l'être avant création des nouveaux marqueurs.
Code:

1 2 3 4 5 6 $.post('connexion.php', // Mon fichier cible côté serveur. 'date=' + date, function (data) { // on clear avant la création de nouveaux clearMarkers(); var it = data.lat; //variable me permettant de récupérer la longueur max de mon indentation
Attention aux noms des variables, tu as 2 fois markers.

J'ai bien pris en compte ce que tu m'as dis, j'ai placé la fonction "clear" juste avant la création des marqueurs et j'ai modifié la variable markers en tabMarkers. Seulement ca ne fonctionne toujours pas, les marqueurs précédent s'affichent toujours. :?

Ci-joint mon code après les modifications:

Code:

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
 
$('.day').click(function(){
 
    var date=$('#date').val();
    $('#resultat').html(date);
 
    var tabMarkers=[];
    function clearMarkers(){
        var i, nb = tabMarkers.length;
        for( i=0; i < nb; i++){
             tabMarkers[i].setMap(null);
        }
     tabMarkers = [];
     }
 
 
$.post(
    'connexion.php', // Mon fichier cible côté serveur.
	'date=' + date, 
	function (data){
 
            clearMarkers();
 
	    var it=data.lat; //variable me permettant de récupérer la longueur max de mon indentation
 
	    for(var i=0,I=it.length;i<I; i++){  
		     addmarker();		  // Affichage des marqueurs
	        }
 
		function addmarker(latlng){
			var lat=data.lat[i];
			var lng=data.lng[i];
			var marker = new google.maps.Marker({
			  position: new google.maps.LatLng(lat,lng),
			  map: map,
			});
			tabMarkers.push(marker); 
 
   		        var infowindow = new google.maps.InfoWindow();
 
                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
		            map.setZoom(8);
		            map.setCenter(marker.getPosition());
                            infowindow.setContent(data.dj[i]);
                            infowindow.open(map, marker);
                           }
                        })(marker, i));
 
	       }
 
	   },
	'json'
	);
});

PS: j'ai aussi supprimé "var markers=[[data.dj[i],data.lat[i],data.lng[i]],];" qui ne servait en effet à rien.

07/10/2014, 19h05
NoSmoking
Citation:

Seulement ca ne fonctionne toujours pas, les marqueurs précédent s'affichent toujours. :?

une chose nous manque quand même est que tu sauvegardes les marqueurs lors de leur première création, on n'a pas cette partie du code.

A chaque création il te faut faire un tabMarkers.push(marker);.

Par curiosité, pourrais tu nous donner un exemple de ce que retourne ton POST comme données, function (data){, objet JSON certes mais contenant quoi?
J'ai du mal à coprendre ce bout de code
Code:

1 2 3 4 5 var it=data.lat; //variable me permettant de récupérer la longueur max de mon indentation for(var i=0,I=it.length;i<I; i++){ addmarker(); // Affichage des marqueurs }

Voici le code de ma page connexion appelée dans mon POST:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
// CONNEXION base de données
 
				$req = $bdd->prepare("SELECT d.lat lat, d.lng lng, e.dj1 dj1 FROM evenements e INNER JOIN discotheque d ON d.discotheque = e.discotheque WHERE e.date= ?");
 
				$req->execute(array($_POST['date']));
 
				$lat=array();
				$lng=array();
				$dj=array();
				while ($donnees = $req->fetch())
				{
				$lat[]= $donnees["lat"];
				$lng[]= $donnees["lng"];
				$dj[]= $donnees["dj1"];
	}
               	$req->closeCursor();
 
echo json_encode(array(
    "lat" => $lat,
    "lng" => $lng,
    "dj" => $dj
));

Je fais appel à ma base de donnée pour récupérer en tableau les données sélectionnées en fonction de ma variable DATE.

J'ai toujours du mal à savoir qu'est ce qui est affiché et qu'est ce qui ne s'affiche pas ou ne s’efface pas, toujours est-il que l'on va commencer à mettre de l'ordre dans ton code qui reste un peu "artisanal" ;)

reprenons la fonction callback function(data){...}

Code:

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
function (data) {
    // suppression des markers existants
    clearMarkers();
    // initialisation variable
    var i, nb = data.lat.length;
    // création des marqueurs suivant data reçues
    for (i = 0; i < nb; i++) {
        // passage en paramètre des données d'affichage
        addmarker(data.lat[i], data.lng[i], data.dj[i]);
    }
    // fonction de création et d'affichage
    function addmarker(lat, lng, dj) {
        // création d'un marqueur
        var marker = new google.maps.Marker({
          position: {'lat': lat, 'lng': lng},  // cette forme est admise maintenant                
          map: oMap,                           // ici oMap est la map créer au départ pour l'affichage
        });
        // stoque le marqueur crée dans le tableau
        tabMarkers.push( marker);
        // création d'une infoWindow pour chaque marqueur
        var infowindow = new google.maps.InfoWindow();
        // pas besoin de créer de closure dans ce cas les paramètres sont ceux passés à la fonction
        google.maps.event.addListener( marker, 'click', function () {
            // récup. map associée au marker
            var map = this.getMap();
            map.setZoom(8);
            map.setCenter( this.getPosition());  // préférable d'utiliser this dans la fonction événement
            infowindow.setContent( dj);          // contenu dj passé en paramètre donc pas de soucis
            infowindow.open( map, this);
          }
        )
    }
  }

il me semble l'avoir suffisamment commenté.

Ca y est, enfin!!

Ma variable tabMarkers était depuis le début définie dans mon événement "$('.day').click(function(){}" et non avant... Elle ne se réinitialisait donc jamais mais était recréée à chaque fois.

En revanche je n'ai pas réussi à utiliser le code "position: {'lat': lat, 'lng': lng},".

En tout cas merci beaucoup NoSmoking, mon code est plus clair et je le comprend moi-même beaucoup mieux.

Voici mon code entier:

Code:

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
 
var tabMarkers=[]; //création d'un tableau pour enregistrer les marqueurs
 
  //l'événement à considérer
$('.day').click(function(){
	//la donnée à prendre en compte pour chercher dans ma BDD
var date=$('#date').val();
//ecriture de la date pour vérifier que ma variable fonctionne
$('#resultat').html(date);
 
function clearMarkers(){
  var i, nb = tabMarkers.length;
  for( i=0; i < nb; i++){
    tabMarkers[i].setMap(null); //désactive l'affichage des données du tableau sur la carte
  }
  tabMarkers = []; //remise à zero du tableau de marqueurs
}
 
$.post(
    'connexion.php', // Mon fichier cible côté serveur.
	'date=' + date, 
	function (data) {
	  // suppression des markers existants
	  clearMarkers();
	  // initialisation variable
	  var i, nb = data.lat.length;
	  // création des marqueurs suivant data reçues
	  for (i = 0; i < nb; i++) {
		  // passage en paramètre des données d'affichage
		  addmarker(data.lat[i], data.lng[i], data.dj[i]);
	  }
	  // fonction de création et d'affichage
	  function addmarker(lat, lng, dj) {
		  // création d'un marqueur
		  var marker = new google.maps.Marker({
			position: new google.maps.LatLng(lat, lng),  // indication de position  
		  });
		  // stoque le marqueur crée dans le tableau
		  tabMarkers.push( marker);
		  tabMarkers[i].setMap(oMap);
		  // création d'une infoWindow pour chaque marqueur
		  var infowindow = new google.maps.InfoWindow();
		  // pas besoin de créer de closure dans ce cas les paramètres sont ceux passés à la fonction
		  google.maps.event.addListener( marker, 'click', function () {
			  // récup. map associée au marker
			  var map = this.getMap();
			  map.setZoom(8);
			  map.setCenter( this.getPosition());  // préférable d'utiliser this dans la fonction événement
			  infowindow.setContent( dj);          // contenu dj passé en paramètre donc pas de soucis
			  infowindow.open( map, this);
			}
		  )
	  }
 
	},
	'json'
	);
});
 
}