Comportement du programme d'écoute d'événements de l'API Google Maps - prévu?

Question

Le code est très straight-forward comme suit:

var populateGoogleMap = function (points) { 
    for (i = points.length - 1; i >= 0; i--) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      position: new google.maps.LatLng(point.target.x, point.target.y) 
     }); 
     google.maps.event.addListener(marker, 'click', function (e) { 
      toggleBounce(marker); 
     }); 
     nodes[i].marker = marker; 
    } 
}; 

Il se trouve que le en toggleBounce(marker) est toujours le dernier qui est créé. J'ai considéré ce problème un peu, et j'ai trouvé une solution en modifiant la fonction. J'ai enlevé la boucle dans la fonction, et utilise une boucle ailleurs pour appeler cette fonction plusieurs fois. Donc, maintenant, il devient for (i = 0; i < points.length; i++) { populateGoogleMap(point); }.

Est-ce que ce comportement est prévu par l'API Google Maps? Je pense que cela peut être déroutant pour beaucoup de gens, puisque la variable devrait se référer à celle dans le contexte actuel.

Answer 1

Ce n'est pas quelque chose d'unique à Google Maps. Vous avez la création d'une fois la fonction d'écouteur d'événement X:

google.maps.event.addListener(marker, 'click', function (e) { 
    toggleBounce(marker); 
}); 

Lorsque vous avez terminé votre boucle, la valeur de est le tout dernier créé dans la boucle. Tout ce que vous avez vraiment fait est de redéfinir l'écouteur d'événement click marker, X fois.

Une autre façon de l'expliquer. Imaginez que vous ne disposez pas d'une boucle, mais vous créez plusieurs marqueurs, comme ceci:

 var marker = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      position: new google.maps.LatLng(point.target.x, point.target.y) 
     }); 
     google.maps.event.addListener(marker, 'click', function (e) { 
      toggleBounce(marker); 
     }); 

     var marker = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      position: new google.maps.LatLng(point.target.x, point.target.y) 
     }); 
     google.maps.event.addListener(marker, 'click', function (e) { 
      toggleBounce(marker); 
     }); 

Vous avez réussi à créer deux marqueurs (même si elles ont le même nom de variable), mais tout ce que vous avez done est créer une fonction d'écouteur d'événement, et cela ne fonctionnera que pour le 2ème de ces deux marqueurs.

Si au contraire, vous auriez fait:

 var marker1 = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      position: new google.maps.LatLng(point.target.x, point.target.y) 
     }); 
     google.maps.event.addListener(marker1, 'click', function (e) { 
      toggleBounce(marker1); 
     }); 

     var marker2 = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      position: new google.maps.LatLng(point.target.x, point.target.y) 
     }); 
     google.maps.event.addListener(marker2, 'click', function (e) { 
      toggleBounce(marker2); 
     }); 

alors vous avez deux fonctions d'écouteur d'événements différents, pour les deux marqueurs différents. Donc, en déplaçant ceci dans sa propre fonction en dehors de la boucle, et en passant chaque marqueur dans cette fonction comme argument, vous créez un écouteur d'événement unique pour chacun d'eux. Avoir du sens?