किसी भी आइकन के साथ कैटलॉग मानचित्र पर केवल-पाठ लेबल कैसे जोड़ें

22

मैं किसी भी आइकन को दिखाए बिना मार्कर या कुछ और का उपयोग करके कैटलॉग मानचित्र पर पाठ दिखाने का एक तरीका ढूंढ रहा हूं। मैं केवल पाठ दिखाना चाहता हूं और इसे स्टाइल और घुमा सकता हूं ... कोई सुझाव?

leaflet

— एटिने देसगग्ने
स्रोत

1

@ निखिलविजे - यह प्रश्नोत्तर एक संबंधित मार्कर के बिना टूलटिप के बारे में चर्चा नहीं करता है। यहां दिए गए जवाबों में इस बात पर चर्चा की गई है कि केवल टेक्स्ट कैसे हो , कोई दृश्यमान मार्कर न हो।

— टूलमेकरसैट

आह क्षमा करें मेरा बुरा

— निखिल वीजे

19

मैंने USC L.DivIcon सुविधा का उपयोग करके अपनी समस्या हल की जो मार्करों के लिए एक हल्के आइकन का प्रतिनिधित्व करता है जो एक छवि के बजाय एक सरल div तत्व का उपयोग करता है ... इन मार्करों में एक html और एक क्लासनेम विकल्प हैं जो मुझे css के साथ लेबल बनाने की अनुमति देते हैं। शैलियों ...

— एटिने देसगग्ने
स्रोत

11

क्या आप इसके लिए थोड़ा सा कोड प्रदान करना चाहेंगे?

— मस्तोव

यदि आप एक लेबल और एक मार्कर चाहते हैं तो यह जवाब विचार नहीं है

— रॉय

@ रोय - वह एक अलग स्थिति है; L.Tooltip देखें । यदि आप चाहते हैं कि लेबल (टूलटिप) हमेशा दिखाई दे, तो आप विकल्प को सही पर सेट करते हैं।

— टूलमेकरसैट

16

१.० Update के लिए अद्यतन: १.०१ के रूप में, १.२०१. के रूप में, यह कैटलॉग कोर के साथ शामिल किया गया है के रूप में, कैटलॉग प्लगइन को हटा दिया गया है L.Tooltip। स्रोत स्क्रिप्ट को शामिल करने की कोई आवश्यकता नहीं है, और वाक्यविन्यास थोड़ा बदल गया है। नमूना उपयोग:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

CSS स्टाइलिंग को पहले की तरह ही क्लास में लागू किया जा सकता है।

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

यह भी प्रतीत होता है कि मार्कर अपारदर्शिता पूरी तरह से 0 पर सेट हो सकती है।

: पत्रक 1.0 से पहले उपयोग Leaflet.label प्लगइन (पहले से ही geomajor56 ने उल्लेख किया)।

<script src="scripts/leaflet.label.js"></script>

कैटलॉग लेबल प्लगइन के साथ, लेबल सीधे मार्करों से बंधे होते हैं, लेकिन आप मार्कर की अस्पष्टता लगभग शून्य पर सेट कर सकते हैं ताकि केवल लेबल दिखाई दे। (यदि आप मार्कर की अपारदर्शिता को 0 पर सेट करते हैं, तो संबंधित लेबल गायब हो जाता है।)

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

आप अपने लेबल को स्टाइल करने के लिए CSS का उपयोग कर सकते हैं जैसा कि आप फिट देखते हैं:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

— जेम्स लॉरुक
स्रोत

— मार्सिन कोसीकोस्की

@ MarcinKosiński - हाँ, आपको पोस्ट में GitHub लिंक से लीफलेट.लेबेल.जेएस डाउनलोड करना होगा, और इसे स्क्रिप्ट नाम की आपकी वेबसाइट के सबफ़ोल्डर में डालना होगा। या, आप URL को कोड में होस्ट की गई फ़ाइल लीफलेट.जीथब्यू .io / Leaflet.label / leaflet.label.js से बदल सकते हैं (आप सीएसएस फ़ाइल भी चाह सकते हैं; एक ही नाम और स्थान, अलग-अलग एक्सटेंशन)।

— कीथ्स

मैंने ऐसा करने की कोशिश की ,,, पृष्ठभूमि और सीमा को हटाने का कोई विचार? snag.gy/JdnpyV.jpg

— WantIt

L.TooltipOnEachFeature के अंदर उपयोग करते समय, त्रुटि प्राप्त करना: "बिना पढ़ा हुआ टाइपर: 'नोड' पर 'appendChild' को निष्पादित करने में विफल: पैरामीटर 1 टाइप 'Node' का नहीं है।"

— निखिल वीजे

हल किया गया, मैं पाठ के रूप में एक विशेषता गुण का उपयोग कर रहा था, .toString()अंत में संलग्न करना था । marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— निखिल वीजे

4

आप यहाँ इस USC plugin से शुरुआत कर सकते हैं । संभवतः अपनी पसंद के हिसाब से मार्कर बनाएं या संपादित करें। क्या पाठ फीचर विशेषताओं से आ रहा है?

— geomajor56
स्रोत

यह एक अलग सवाल का जवाब था। यह मौजूदा मार्कर में एक लेबल जोड़ने का तरीका है ; यह एक व्याख्या नहीं है कि कैसे केवल एक लेबल होना चाहिए - कोई मार्कर प्रतीक नहीं।

— टूलमेकरसैट

0

marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

यह मेरे लिए काम करता है

— सतीश कुमार अरुणाचलम
स्रोत

यह एक अलग सवाल का जवाब था। यह मौजूदा मार्कर में एक लेबल जोड़ने का तरीका है ; यह एक व्याख्या नहीं है कि कैसे केवल एक लेबल होना चाहिए - कोई मार्कर प्रतीक नहीं।

— टूलमेकरसेव