पत्रक: चित्र आकार में पॉपअप समायोजित करें

Question

मैं अपने लीफलेट पॉपअप में चित्रों को शामिल करने की कोशिश कर रहा हूं, लेकिन पॉपअप-आकार चित्र आकार में समायोजित नहीं होता है। मैं GitHub पर इस के लिए एक समाधान पाया:

https://github.com/Leaflet/Leaflet/issues/724

है कि समाधान पॉपअप के आकार को ठीक करता है, परिणाम स्थानांतरित कर दिया है और पॉपअप आइकन/मार्कर पर केंद्रित दिखाई नहीं देता ... किसी भी इसे बदलने का तरीका?

.leaflet-popup-content { 
    width:auto !important; 
} 

इसके अलावा अन्य प्रस्तावित समाधान (पॉपअप पर maxWidth की स्थापना) मेरे मामले में मदद नहीं करता है। पॉपअप चौड़ाई 300px के डिफ़ॉल्ट चौड़ाई किया जा रहा है पर रहता है ...

function pop_Fotos(feature, layer) { 
    var popupContent = '<img style="max-height:500px;max-width:500px;" src="..."); 
    layer.bindPopup(popupContent, {maxWidth: 500, closeOnClick: true}); 
} 

Answer 1

सीधे शब्दों में maxWidth: "auto" विकल्प को निर्दिष्ट पॉपअप पर्याप्त लगता है पर ...

layer.bindPopup(popupContent, { 
    maxWidth: "auto" 
}); 

डेमो: http://jsfiddle.net/3v7hd2vx/29/

---

ईडी आईटी

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

popupContent = document.createElement("img"); 
popupContent.onload = function() { 
    layer.openPopup(); 
}; 
popupContent.src = "path/to/image"; 
layer.bindPopup(popupContent, { 
    maxWidth: "auto" 
}); 

अपडेट किया गया डेमो:

एक साधारण वैकल्पिक हल छवि "load" घटना को सुनने के लिए और उस पल में पॉपअप को फिर से खोलने के लिए है http://jsfiddle.net/3v7hd2vx/32/

---

संपादित 2

यहां एक और सामान्य समाधान है: <IMG> केपर कब्जा करें सभी पत्रक पॉपअप परघटना और उन्हें हर बार update() पर मजबूर करें।

document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) { 
    var tagName = event.target.tagName, 
     popup = map._popup; // Currently open popup, if any. 

    if (tagName === "IMG" && popup) { 
    popup.update(); 
    } 
}, true); // Capture the load event, because it does not bubble. 

डेमो: https://jsfiddle.net/3v7hd2vx/277/

संदर्भ: http://leafletjs.com/reference.html#popup-update: Leaflet issue #5484 (comment)

Answer 2

• पॉपअप के लिए एक अद्यतन समारोह (जो दस्तावेज़ का कहना है सिर्फ इस उद्देश्य के लिए है) नहीं है।

• इसके अलावा, जब कोई पॉप अप खोला जाता है तो एक ईवेंट: http://leafletjs.com/reference.html#path-popupopen।

• और घटना ईवेंट हैंडलर के लिए पारित पॉपअप को दिखाता है: http://leafletjs.com/reference.html#popup-event-popup

मेरे पॉप अप सामग्री सिर्फ एक सरल छवि से थोड़ा अधिक विविध था, लेकिन चौड़ाई गया था, ज़ाहिर है, अभी भी प्रभावित सामग्री में छवियों के लिए लोड समय से (और एक बार जब ब्राउज़र ब्राउज़र कैश में था) ठीक था।

तो जब मैं इस समस्या को मारा, सारांश में क्या मैं jQuery का उपयोग कर किया:

function addpopup(mymarker, mycontent) { 
    var myid = "thismarker"; // or whatever 
    mymarker.bindPopup("<div id='"+myid+"'>" + mycontent + "</div>", 
     {maxWidth: "auto"}); 
    mymap.on("popupopen", function(e){ 
     $("#"+myid+" img").one("load", function(){ e.popup.update(); }); 
    }); 
}