IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Supprimer un ensemble de marqueurs, Google Maps API
Options
Anard
posté 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, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post
Anard
posté 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... wink.gif )
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, Asus GTX670 Intel HD4600, 2x SSD 256Go, HDD 500Go+Zraid 3x2To / Clover - macOS Mojave / Gentoo-Xfce
"Portable" : HP Pavilion DV3500, Intel core2 T6400, 4Go DDR3, NVidia GeForce 9300M, HDD 256Go / Grub2 - Gentoo-Xfce
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 28th March 2024 - 11:40