Données Google Maps Marker

Question

Je suis actuellement en train d'effectuer un appel ajax sur le serveur pour obtenir une liste des lat/longs affichés sur une carte google. J'ai également joint un événement "click" à chaque marqueur. L'astuce est que je dois être capable de stocker un peu de données supplémentaires sur le marqueur pour savoir quel ID (de la base de données) que j'ai affaire afin que je corresponde à la db plus tard. J'utilise la propriété Title pour afficher des informations amicales. L'AJAX, la création de marqueurs et l'événement click fonctionnent bien. Quelle est la bonne façon de stocker les données supplémentaires pour le marqueur? Voir code ici:

$.ajax({ 
    url: "/location/NearbyHotspots", 
    data: { 
     lat: marker.position.lat(), 
     lng: marker.position.lng(), 
     radius: 10 
    }, 
    datatype: "json", 
    type: "POST", 
    success: function (data, status, xhttp) { 
     for (var i = 0; i < data.length; i++) { 
      var loc = new google.maps.LatLng(data[i].Lat, data[i].Long); 
      var newmarker = new google.maps.Marker({ 
       position: loc, 
       draggable: false, 
       map: map, 
       title: data[i].Name 
      }); 

      // This doesn't seem to work 
      newmarker.hotspotid = data[i].ID; 
      google.maps.event.addListener(newmarker, "click", function(mark) { 
       alert(mark.hotspotid); 
      }); 
     } 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
     alert(textStatus); 
    } 
}); 

Answer 1

HA! Je l'ai compris. "ceci" l'a fait!

google.maps.event.addListener(newmarker, "click", function(mark) { 
    alert(this.hotspotid); 
}); 

Answer 2

Je pense que votre approche est correcte, c'est juste le gestionnaire d'événements qui est incorrect. Dans votre gestionnaire

function(mark) { 
    alert(mark.hotspotid); 
} 

L'argument mark n'est pas un marqueur, comme prévu, mais un MouseEvent (see the API reference for details).

Pour résoudre ce problème, vous devez utiliser une fermeture pour passer dans la référence au marqueur. Ceci est compliqué par la boucle - vous ne pouvez pas simplement utiliser une référence à newmarker, car elle se référera uniquement au dernier marqueur de la boucle. Il existe plusieurs façons de résoudre ce problème, mais la plus simple consiste à associer l'événement click dans une fonction distincte:

success: function (data, status, xhttp) { 
    // define a function to attach the click event 
    function attachClickEvent(marker) { 
     google.maps.event.addListener(marker, "click", function() { 
      // the reference to the marker will be saved in the closure 
      alert(marker.hotspotid); 
     }); 
    } 
    for (var i = 0; i < data.length; i++) { 
     var loc = new google.maps.LatLng(data[i].Lat, data[i].Long); 
     var newmarker = new google.maps.Marker({ 
      position: loc, 
      draggable: false, 
      map: map, 
      title: data[i].Name 
     }); 

     newmarker.hotspotid = data[i].ID; 
     attachClickEvent(newmarker); 
    } 
},