लीफलेट का उपयोग करके क्लिक पर मार्कर आइकन बदलें

Question

मेरे पास इस पर कई (> 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);
});

पिछले एक (जब कोई भी क्लिक किया जाता है) को बदल देता है, जबकि एक अपरिभाषित चेतावनी भी देता है।

मैं मार्कर कैसे सेट कर सकता हूं ताकि प्रत्येक को एक क्लिक के साथ व्यक्तिगत रूप से बदला जा सके, लेकिन हर एक के लिए सैकड़ों बार कोड ब्लॉक का उपयोग किए बिना?

Answer 1

मैंने इसका हल निकाल लिया। मुझे यह भी पता लगा कि आप मनमाने विकल्प जोड़ सकते हैं और बाद में उन तक पहुँच सकते हैं। मार्कर के लिए अद्वितीय आईडी निर्दिष्ट करने के लिए यह उपयोगी है:

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