전단지를 사용하여 클릭시 마커 아이콘 변경

많은 (> 100) 개의 마커가있는지도가 있습니다. 이 버튼을 클릭하면 아이콘이 강조 표시된 버전으로 변경되도록하고 싶습니다. 두 개의 사용자 정의 아이콘을 만들었습니다. 하나는 일반과 하나는 강조 표시되어 있습니다. 단일 마커로 작동하도록 이것을 얻었지만 각 아이콘을 클릭하여 변경할 수 있도록 설정할 방법을 찾을 수 없습니다.

하나의 아이콘에 대한 작업 코드는 다음과 같습니다.

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

정의되지 않은 경고를 제공하면서 마지막 항목 (클릭 할 때)을 변경합니다.

한 번의 클릭으로 각각 개별적으로 변경할 수 있지만 각각에 대해 수백 개의 반복되는 코드 블록을 사용하지 않고 마커를 설정하려면 어떻게해야합니까?

나는 이것을 해결했다. 또한 임의의 옵션을 추가하고 나중에 액세스 할 수 있다고 생각했습니다. 마커에 고유 한 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];
}); 
}