リーフレットを使用してクリック時にマーカーアイコンを変更する

多くの（> 100）マーカーのあるマップがあります。これらをクリックすると、アイコンが強調表示されたバージョンに変わります。2つのカスタムアイコンを作成しました。1つは通常、もう1つは強調表示されています。これは単一のマーカーで動作するようになりましたが、設定する方法が見つからないため、各アイコンをクリックして変更できます。

1つのアイコンの作業コードは次のとおりです。

var testmarker = L.marker([44.0, -73.0], {icon: unselectedIcon});

testmarker.on('click', function(e) {
  testmarker.setIcon(selectedIcon);
});

ただし、多くのマーカーがあり、forループを使用してそれらを配置します。

//points is a 2 dim array with lat/long pairs
for (i = 0; i <= points.length-1; i++) {
    var marker = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon});    
}

marker.on('click', function(e) {
  marker.setIcon(selectedIcon);
});

配列を使用して、各マーカーに一意の変数名を付けてみました：

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon}); 
    testmarker[i].on('click', function(e) {
alert(e.latlng); e.setIcon(selectedIcon); 
}); 
}

アラートで「未定義」になります。

に変更すると、マップをクリックしたときにアラートが表示さtestmarker[i].onれるthis.map.onだけです（アイコンは変更されません）。

その行全体を次のように変更します。

testmarker[i].on('click', function(e) {
alert(e.latlng); testmarker[i].setIcon(selectedIcon);
});

未定義のアラートを与えながら、最後の1つ（クリックされた場合）を変更します。

マーカーを設定して、クリックごとにそれぞれを変更できるようにするにはどうすればよいですか？

私はこれを解決することになりました。また、任意のオプションを追加して後でアクセスできることもわかりました。これは、一意のIDをマーカーに割り当てるのに便利です。

for (i = 0; i <= points.length-1; i++) {
    testmarker[i] = L.marker([points[i][0], points[i][1]], {icon: unselectedIcon, id: i}); 
    testmarker[i].on('click', function(e) {
        e.target.setIcon(selectedIcon);
        document.getElementById('someDiv').innerHTML = points[e.target.options.id][2];
}); 
}