Google maps：イベントをクリックするためにパラメータをバインドする

Question

Google Maps JavaScript APIを使用して地図にマーカーを追加しています。各マーカーについて、私はそれぞれのクリックイベントにリスナーを追加します。以下は私のコードです。それが発火するとき、私はiの値で何かをすることができるように

for (var i = 0; i < markers.length; i++) { 
    var marker = addMarker(markers[0]); //The addMarker function contains the code to add the marker 

    marker.addListener('click', function() { 
     console.log(i); 
    }); 
} 

は私もクリックイベントにiのparamをバインドする（私は後で別の変数であることを、これを変更します）。しかし、今までコンソールでクリックしたのはどれですか？は常に最後の値をログアウトします。

ループの繰り返しごとに、クリックイベントのコールバックが上書きされます。誰も私がこれを解決する方法を知っていますか？

Answer 1

クロージャを使用する場合は、このようにすることができます。これにより、クリックするとiが保持されます。

以下は、このアイデアを指摘するための一例にすぎないことに注意してください。

var markers = ["marker1","marker2","marker3"]; 
 
for (var i = 0; i < markers.length; i++) { 
 

 
     var marker = addMarker(markers[i]); //The addMarker function contains the code to add the marker 
 
     (function(_i,marker){ 
 
     marker.addEventListener('click', function() { 
 
      alert(_i); 
 
     }); 
 
     })(i,marker) 
 
} 
 

 
function addMarker(marker){ 
 
    var elem = document.createElement('div'); 
 
    elem.id = marker; 
 
    elem.textContent = marker; 
 
    document.body.appendChild(elem); 
 
    return elem; 
 
}