USC मार्कर पर पॉपअप स्थिति बदलना?

Question

मैं कैटलॉग में अपने मार्कर आइकन के नीचे एक पॉपअप खोलना चाहता हूं।

मेरा कोड:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

इसलिए मुझे अपने मार्कर के ऊपर एक पॉपअप मिलता है।

मैं नीचे की तरह एक पॉपअप प्राप्त करना चाहता हूं:

Comments

इस Q / A, stackoverflow.com/questions/27144334/…

— कलाकृति

आपके लिंक पर कोई काम करने वाला समाधान नहीं है। शायद यह टिप्पणी सच है: "आप जो कर सकते थे वह मार्कर के क्लिक में हुक है और कस्टम कोड के साथ अपना पॉपअप आकर्षित करता है" नीचे पॉपअप के लिए कोई सरल तरीका नहीं है?

— गर्ड

मौजूदा स्थिति कलाकृति 21 के टिप्पणी लिंक के समान है, मार्कर के नीचे पॉपअप के लिए आपके प्रश्न के बारे में। प्रस्तावित प्लगइन के साथ देखें फ्रांसइमेज का जवाब ( stackoverflow.com/a/27144900/5108796 )। आप अपने स्वयं के कस्टम पॉपअप बनाने के लिए उस प्लगइन का उपयोग कर सकते हैं या उससे प्रेरणा प्राप्त कर सकते हैं।

— १

क्या हम इसे पॉपअप की सीएसएस स्थिति में नहीं कर सकते हैं? क्योंकि डिफ़ॉल्ट रूप से यह नीचे से संदर्भित है, अगर हम शीर्ष पर स्विच करते हैं तो यह सही होगा [एक निश्चित ऑफ़सेट तक] भले ही फोंट / फोंटाइज / लाइनहाइट चुने गए और पाठ की लाइनों की संख्या की परवाह किए बिना? मैं शायद कुछ देख रहा हूँ।

— user3445853

Answer 1

आप popupAnchorविकल्पों का उपयोग करके ऑफ़सेट निर्दिष्ट कर सकते हैं , लेकिन वह नहीं जहाँ आप इसकी अपेक्षा करेंगे। सबसे पहले, आपको इस तरह एक आइकन निर्दिष्ट करने की आवश्यकता है:

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

आप इस आइकन का उपयोग अपने मार्कर विकल्पों में कर सकते हैं:

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

अब आपका पॉपअप आपके मार्कर से 30 px ऊपर खुलता है। यह बिल्कुल वैसा नहीं है जैसा आपने पूछा था, आपको अपने पॉपअप के शीर्ष पर थोड़ा तीखा त्रिकोण रखने की आवश्यकता है, लेकिन मुझे लगता है कि यह अभी भी ध्यान देने योग्य है।

Comments

अधिक समस्या के रूप में हाल ही में [29 अगस्त 2019] @ जोहान्स द्वारा उत्तर: यह ऑफसेट गलत है क्योंकि पॉपअप में पाठ की दूसरी या आगे की पंक्ति है; या CSS (फॉन्ट-साइज, फॉन्ट, लाइन-हाइट, पैडिंग, मार्जिन, पॉपअप साइज, ...) में बदलाव। इसलिए मूल जवाब "कोई मूल समाधान नहीं है" खड़ा है।

— user3445853

Answer 2

देशी पत्ता हल नहीं है।

एक अन्य तरीका https://github.com/erictheise/rrose का उपयोग है

अच्छा डेमो:

http://jsfiddle.net/asleepwalker/6m81vtad/

Answer 3

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन आपको उसके उत्तर में वर्णित चक्कर @ लेने की आवश्यकता नहीं है।

जैसा Popupकि इनहेरिट कर रहा है DivOverlay, आप प्रारंभिक विकल्प को सीधे सेट कर सकते हैं Popup:

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

डॉक्स पढ़ें: https://leafletjs.com/reference-1.5.0.html#popup

Comments

इस दृष्टिकोण के साथ समस्या यह है कि आपके पास ऑफ़सेट के लिए जादुई नंबर हैं: यदि फ़ॉन्ट-आकार या फ़ॉन्ट या यहां तक ​​कि लाइन-ऊँचाई में परिवर्तन होता है, तो ऑफ़सेट खराब है। अधिक समस्यात्मक रूप से, अगर कुछ पॉपअप में पाठ की दूसरी (या तीसरी, आदि) लाइन होती है, तो वे अब एक पूर्ण लाइन-ऊंचाई (या दो, आदि) बहुत अधिक होती हैं, और शायद मार्कर और उसके पड़ोस को पूरी तरह से ओवरलैप करते हैं। संभवतः आपको पॉपअप के अंदर पाठ की ऊंचाई को मापने और ऑफसेट को गतिशील रूप से बदलने और जेएस के उपयोग के दौरान / प्रतिपादन के बाद इसे स्थानांतरित करने की आवश्यकता होगी; या बहुत सीएसएस तय किया है और मार्कर को जोड़ने से पहले अपने पत्रक मानचित्र के दौरान इसकी गणना करें।

— user3445853

Answer 4

यह सिर्फ सीएसएस में संभव प्रतीत होता है। नीचे मैं !importantकेवल तीन सीएसएस तत्वों को ओवरराइड कर रहा हूं (और ) एक :beforeछद्म तत्व जोड़ रहा हूं । मैं मूल रूप से पहले पॉपअप को नीचे के बजाय ऊपर से ऊपर की ओर झुका रहा हूं , जहां सिर्फ आपके चुने हुए मार्कर और व्यक्तिगत स्वाद पर निर्भर करता है।55px

मैं फिर पॉपअप के "टिप" को नीचे से इसी तरह घुमाता हूं top:0px, और पता चलता है कि यह "सामान्य" चाल का उपयोग करके नहीं बनाया गया है (यह है: बुलबुले के किनारे पर पहली स्थिति 0x0-आकार का छद्म तत्व जो मोटी पारदर्शी सीमा के साथ है, फिर उसे रंग दें तत्व की विपरीत सीमा जहां आप इंगित करना चाहते हैं, हमारे मामले में, नीचे की सीमा)। इसके बजाय यह एक आयत से बनाया गया लगता है जिसे कहीं से ऊपर-बाएँ घुमाया जाता है (हो सकता है: क्योंकि यह ब्राउज़र को GPU का उपयोग करने के लिए मजबूर करता है और इसलिए सबकुछ तेज करता है?) और मुझे बिंदु (क्षमा नहीं) बहुत अच्छी तरह से मिलता है? मेरी टिप सही जगह पर अदृश्य है); तो मैं सिर्फ उस गलत जगह पर बॉक्स-छाया को हटा देता हूं और इसे सभी के रूप में छोड़ देता हूं --- कोई भी जो "पुराने टिप" को समझता है कृपया उसे समायोजित करें।

इसलिए इसके बजाय मैं "सामान्य" प्रक्रिया के साथ अपना टिप बनाता हूं, (यदि आप अनिश्चित हैं, तो नीचे के चार बॉर्डर रंगों को बदल दें, बजाय 3x पारदर्शी और 1x सफेद --- जैसे border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red)।

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

जैसा कि यह JSFiddle प्रदर्शित करता है, यदि आप दोनों मार्करों की कोशिश करते हैं तो अलग-अलग पॉपअप-आकार (अलग चौड़ाई, अलग बनावट) के साथ कोई समस्या नहीं है।

यह सब कुछ कैटलॉग में अपडेट के खिलाफ मजबूत लगता है क्योंकि मैं जिन चीजों को ओवरराइड कर रहा हूं उनमें बदलाव की संभावना नहीं है।