Thay đổi biểu tượng đánh dấu khi nhấp bằng tờ rơi

Tôi có một bản đồ với nhiều điểm đánh dấu (> 100) trên đó. Tôi muốn làm cho nó để nhấp vào những thay đổi biểu tượng thành phiên bản được tô sáng. Tôi đã tạo hai biểu tượng tùy chỉnh, một biểu tượng thông thường và một biểu tượng được tô sáng. Tôi đã nhận được điều này để làm việc với các điểm đánh dấu duy nhất, nhưng không thể tìm thấy bất kỳ cách nào để thiết lập nó để mỗi biểu tượng có thể được thay đổi bằng cách nhấp vào nó.

Đây là mã làm việc cho một biểu tượng:

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

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

Tuy nhiên tôi có nhiều điểm đánh dấu và sử dụng vòng lặp for để đặt chúng:

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

Tôi đã thử đặt cho mỗi điểm đánh dấu một tên biến duy nhất bằng cách sử dụng một mảng:

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

Mà chỉ cho tôi "không xác định" trong cảnh báo.

Thay đổi testmarker[i].onthành this.map.onchỉ đưa ra cảnh báo khi nhấp vào bản đồ (không thay đổi biểu tượng).

Thay đổi toàn bộ dòng thành:

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

Thay đổi cái cuối cùng (khi bất kỳ cái nào được nhấp), đồng thời đưa ra cảnh báo không xác định.

Làm cách nào tôi có thể thiết lập các điểm đánh dấu để mỗi cái có thể được thay đổi riêng lẻ bằng một cú nhấp chuột, nhưng không sử dụng hàng trăm khối mã lặp lại cho mỗi khối?

Tôi đã kết thúc việc giải quyết này. Tôi cũng đã tìm ra bạn có thể thêm các tùy chọn tùy ý và truy cập chúng sau này. Điều đó hữu ích cho việc gán id duy nhất cho các điểm đánh dấu:

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