Googleマップのマーカーデータ

Question

私は現在、Googleマップに表示される緯度/経度のリストを取得するためにサーバーにajax呼び出しを行っています。各マーカーにも「クリック」イベントを添付しました。私が扱っているID（​​データベースから）を知るために、マーカーに少し余分なデータを格納できるようにする必要があるということです。フレンドリーな情報を表示するためにTitleプロパティを使用しています。 AJAX、マーカーの作成、およびクリックイベントは正常に動作します。マーカーの余分なデータを保存する正しい方法は何ですか？ここでコードを参照してください：

$.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！私はそれを考え出した。 "これは"それをやった！

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

Answer 2

私はあなたのアプローチが正しいと思う、それは間違ったイベントハンドラです。あなたのハンドラ

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

でmark引数は、あなたが期待するように、マーカーではなく、MouseEvent（see the API reference for details）。

これを修正するには、クロージャを使用してマーカーへの参照を渡す必要があります。これはループによって複雑になります。newmarkerへの参照を使用することはできません。これは、ループの最後のマーカを参照するためです。これを修正するにはいくつかの方法がありますが、クリックイベントを別の関数にアタッチするのが最も簡単です：

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); 
    } 
},