Supprimer un ensemble de marqueurs, Google Maps API |
Bienvenue invité ( Connexion | Inscription )
Supprimer un ensemble de marqueurs, Google Maps API |
24 Nov 2015, 15:13
Message
#1
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 659 Inscrit : 7 May 2015 Membre no 195 224 |
Bonjour,
Je fais mes débuts en Javascript sur une petite appli web pour rechercher des copains capables de dépanner son auto en cas de panne. Je tente de récupérer les coordonnées GPS en HTML5 puis j'utilise GoogleMapsAPI pour afficher la position détectée, proposer de rechercher une adresse ou de déplacer le curseur pour se situer plus précisément. A chaque fois que le curseur est posé à un endroit, je vais chercher dans ma base de données les personnes à proximité et les affiche sur la carte. J'ai utilisé tout d'abord un array pour ces marqueurs : Code var voisin = []; // et la requete ajax pour effacer les vieux marqueurs et rechercher dans un nouveau périmètre : function chercheVoisins() { for (var i=0; i < voisin.length; i++) { if (voisin[i] != null) voisin[i].setMap(null); } dist = document.getElementById('voisins').options[document.getElementById('voisins').selectedIndex].id; xhrdist = new XMLHttpRequest(); xhrdist.onreadystatechange = retourChercheVoisins; xhrdist.open('POST', 'rechercheVoisins.php', 'true'); xhrdist.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhrdist.send('dist='+dist); } function retourChercheVoisins() { if (xhrdist.readyState == 4) { // Si readyState vaut 4, c'est que la requête est terminée if (xhrdist.status == 200) { // Réponse de PHP //Contrôle du Json : //alert (xhrdist.responseText); //alert(!(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(xhrdist.responseText.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + xhrdist.responseText + ')')); var reponse = JSON.parse(xhrdist.responseText); for(var i= 0; i < reponse.voisin.length; i++) { voisin[i] = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: {lat: reponse.voisin[i].lat, lng: reponse.voisin[i].lng} }); } } } } Ca fonctionnait très bien. Sauf que je voudrais qu'en cliquant sur l'un d'eux, une fenêtre s'ouvre avec plus d'infos sur la personne (contact etc). J'ai essayé ce code mais ça ne marchait pas : toutes les fenêtres s'affichaient en même temps que les marqueurs et l'evènement 'click' sur les marqueurs voisin[i] ne fonctionnait pas : Code function retourChercheVoisins() { if (xhrdist.readyState == 4) { // Si readyState vaut 4, c'est que la requête est terminée if (xhrdist.status == 200) { // Réponse de PHP var reponse = JSON.parse(xhrdist.responseText); for(var i= 0; i < reponse.voisin.length; i++) { contentDiv[i] = '<div id="infos'+i+'">'+ '<h2><img src="'+reponse.voisin[i].avatar+'" alt="" />'+reponse.voisin[i].pseudo+'<br />'+ '<img src="competence'+reponse.voisin[i].competence+'.jpg" alt="'+reponse.voisin[i].competence+'" /></h2><p>'; if (reponse.voisin[i].matos1 > 0) { contentDiv[i] += '<img src="matos1.jpg" alt="fosse" />'; } if (reponse.voisin[i].matos2 > 0) { contentDiv[i] += '<img src="matos2.jpg" alt="pont" />'; } if (reponse.voisin[i].matos3 > 0) { contentDiv[i] += '<img src="matos3.jpg" alt="plateau" />'; } contentDiv[i] += '<br />situé à '+reponse.voisin[i].distance+'km de vous</p>'+ '</div>'; voisin[i] = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: {lat: reponse.voisin[i].lat, lng: reponse.voisin[i].lng} }); voisin[i].addListener('click', afficheDetails(i)); } }}} function afficheDetails(numero) { //alert (contentDiv[numero]); if (infoWindow != null) infoWindow.close(); infoWindow = new google.maps.InfoWindow({ content: contentDiv[numero] }); infoWindow.open(map, voisin[numero]); } J'ai fini par trouver une solution sur internet en réécrivant tout ainsi : Code var voisins= null; var contentDiv = []; /// [...] function retourChercheVoisins() { if (xhrdist.readyState == 4) { // Si readyState vaut 4, c'est que la requête est terminée if (xhrdist.status == 200) { // Réponse de PHP /// [...] for(var i= 0; i < reponse.voisin.length; i++) { contentDiv[i] = [...] voisins = new google.maps.Marker({ numero: i, map: map, animation: google.maps.Animation.DROP, position: {lat: reponse.voisin[i].lat, lng: reponse.voisin[i].lng} }); google.maps.event.addListener(voisins, 'click', afficheDetails); } /// [...] function afficheDetails() { //alert (contentDiv[this.numero]); if (infoWindow != null) infoWindow.close(); infoWindow = new google.maps.InfoWindow({ content: contentDiv[this.numero] }); infoWindow.open(this.getMap(), this); } Ca fonctionne beaucoup mieux. Sauf que je ne vois pas comment effacer mes anciens marqueurs. J'ai tenté Code if (voisins != null) voisins.setMap(null); mais, comme on peut s'y attendre, il ne supprime que le dernier de la liste, les autres restent présents. Y aurait-il un moyen de récupérer les marqueurs depuis leur propriété ? du genre (voisins.[numero=1]).setMap(null); ? Pour vous éclairer si je ne suis pas très clair, le site en développement est visible ici. Il n'y a que la partie programme JS pour le moment, pas de CSS, pas d'image, pas de différenciation entre le marqueur de position GPS et les marqueurs des voisins, pas de possibilité de rajouter une entrée dans la BDD. Pour voir des voisins apparaitre, placer le marqueur de position (GPS) aux environs de Port en Bessin. Merci beaucoup pour votre aide. Je débute en JS, j'ai bien galéré pour en arriver là (je crois ne pas avoir tout compris comment débugger mes scripts, il y a bien quelques infos dans les developper tools du navigateur, mais ça ne me dit pas souvent grand chose...). Ce message a été modifié par Anard - 24 Nov 2015, 16:06. -------------------- "iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3,
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce |
|
|
24 Nov 2015, 16:15
Message
#2
|
|
Macbidouilleur d'argent ! Groupe : Membres Messages : 659 Inscrit : 7 May 2015 Membre no 195 224 |
... hum ... Le fait d'écrire tout ça fait prendre du recul, j'ai trouvé la solution. Mais je ne sais pas POURQUOI la première version ne fonctionnait pas... (et la réponse m'intéresse, pour chercher moins longtemps la prochaine fois... )
Et ce n'est pas encore parfait : les marqueurs clignotent une fois avant de disparaitre... Code var voisin = [];
var contentDiv= []; var infoWindow = null; /// [...] function chercheVoisins() { for (var i=0; i < voisin.length; i++) { if (voisin[i] != null) voisin[i].setMap(null); } dist = document.getElementById('voisins').options[document.getElementById('voisins').selectedIndex].id; xhrdist = new XMLHttpRequest(); xhrdist.onreadystatechange = retourChercheVoisins; xhrdist.open('POST', 'rechercheVoisins.php', 'true'); xhrdist.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhrdist.send('dist='+dist); } function retourChercheVoisins() { if (xhrdist.readyState == 4) { // Si readyState vaut 4, c'est que la requête est terminée if (xhrdist.status == 200) { // Réponse de PHP var reponse = JSON.parse(xhrdist.responseText); for(var i= 0; i < reponse.voisin.length; i++) { contentDiv[i] = [...] voisin[i] = new google.maps.Marker({ numero: i, map: map, animation: google.maps.Animation.DROP, position: {lat: reponse.voisin[i].lat, lng: reponse.voisin[i].lng} }); google.maps.event.addListener(voisin[i], 'click', afficheDetails); } } } } function afficheDetails() { if (infoWindow != null) infoWindow.close(); infoWindow = new google.maps.InfoWindow({ content: contentDiv[this.numero] }); infoWindow.open(this.getMap(), this); } Ce message a été modifié par Anard - 24 Nov 2015, 16:17. -------------------- "iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3,
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce |
|
|
Nous sommes le : 28th March 2024 - 11:40 |