เปลี่ยนไอคอนเครื่องหมายเมื่อคลิกโดยใช้แผ่นพับ

ฉันมีแผนที่ที่มีเครื่องหมาย (> 100) อยู่มากมาย ฉันต้องการจะทำเช่นนั้นเพื่อให้การคลิกที่ไอคอนเหล่านี้เปลี่ยนเป็นเวอร์ชันที่เน้นสี ฉันได้สร้างไอคอนที่กำหนดเองสองไอคอนไอคอนปกติหนึ่งรายการและไอคอนหนึ่งที่เน้นไว้ ฉันได้รับการทำงานกับเครื่องหมายเดียว แต่ไม่สามารถหาวิธีการตั้งค่าเพื่อให้แต่ละไอคอนสามารถเปลี่ยนแปลงได้โดยคลิกที่มัน

นี่คือรหัสการทำงานสำหรับหนึ่งไอคอน:

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

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

อย่างไรก็ตามฉันมีเครื่องหมายจำนวนมากและใช้สำหรับวงเพื่อวางพวกเขา:

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

เปลี่ยนอันสุดท้าย (เมื่อมีการคลิก) ในขณะเดียวกันก็ให้การแจ้งเตือนที่ไม่ได้กำหนด

ฉันจะตั้งค่าเครื่องหมายเพื่อให้สามารถเปลี่ยนทีละรายการได้ด้วยการคลิก แต่ไม่ต้องใช้บล็อคโค้ดซ้ำหลายร้อยรายการสำหรับแต่ละรายการ

ฉันลงเอยด้วยการแก้ปัญหานี้ ฉันคิดออกว่าคุณสามารถเพิ่มตัวเลือกโดยพลการและเข้าถึงได้ในภายหลัง สิ่งนี้มีประโยชน์สำหรับการกำหนดรหัสเฉพาะให้กับตัวทำเครื่องหมาย:

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