লিফলেট ব্যবহার করে ক্লিক করে চিহ্নিতকারী আইকন পরিবর্তন করুন

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