पत्रक: कस्टम मार्कर आइकन में टेक्स्ट लेबल कैसे जोड़ें?

Question

क्या कस्टम आइकन मार्कर में टेक्स्ट जोड़ना संभव है? मैं टेक्स्ट जोड़ने के लिए किसी छवि संपादक में आइकन को संपादित करने से बचना चाहता हूं।

मैं इतनी तरह मेरे कस्टम आइकन मार्कर बना लिया है:

var airfieldIcon = L.icon({ 
     iconUrl: 'images/airfield.png', 
     iconSize: [48,48] 
}); 

var airfield = L.geoJson (airfield, { 
    pointToLayer: function(feature,latlng){ 
     return L.marker(latlng, { 
      icon: airfieldIcon 
     }) 
    } 
}).addTo(map); 

मैं कैसे इस आइकन के लिए एक लेबल के रूप में पाठ "Banff एयरफील्ड" जोड़ना होगा? एक छवि संपादक का उपयोग कर सबसे आसान और सबसे प्रभावी तरीका है? यदि हां, तो मैं वह तरीका करूंगा, लेकिन सोच रहा हूं कि कोई बेहतर तरीका है या नहीं। धन्यवाद!

Answer 1

आप इस्तेमाल कर सकते हैं एक L.DivIcon:

एक छवि के बजाय एक सरल div तत्व का उपयोग करता है मार्करों के लिए एक हल्के आइकन प्रतिनिधित्व करता है।

http://leafletjs.com/reference.html#divicon

, यह एचटीएमएल में अपनी छवि और पाठ रखो जिस तरह से आप चाहते हैं प्रदर्शित करने के लिए कुछ सीएसएस छिड़क और तुम जाने के लिए

new L.Marker([57.666667, -2.64], { 
    icon: new L.DivIcon({ 
     className: 'my-div-icon', 
     html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+ 
       '<span class="my-div-span">RAF Banff Airfield</span>' 
    }) 
}); 

एक अन्य विकल्प का उपयोग करने के लिए है अच्छा कर रहे हैं पत्रक। लेबल प्लगइन:

Leaflet.label मार्कर & लीफलेट पावर पर आकार जोड़ने के लिए लेबल जोड़ने के लिए प्लगइन है एड नक्शे

• भंडार: https://github.com/Leaflet/Leaflet.label
• उदाहरण: http://leaflet.github.io/Leaflet.label/

Answer 2

पत्रक संस्करण 1.0.0 के रूप में, आप एक प्लगइन का उपयोग किए बिना एक लेबल जोड़ सकते हैं (प्लगइन मुख्य कार्यक्षमता में रोल किया जाता है)।

उदाहरण:

var marker = L.marker(latlng) 
    .bindTooltip("Test Label", 
    { 
     permanent: true, 
     direction: 'right' 
    } 
); 

इस "टेस्ट लेबल" जो हमेशा मार्कर के आइकन के दाईं ओर प्रदर्शित किया जाता है की एक लेबल के साथ मानचित्र पर एक मार्कर अर्जित करता है।