गतिशील सामग्री के साथ पत्रक पॉपअप मार्कर

Question

पर केंद्रित नहीं है, मैं गतिशील सामग्री के साथ एक पुस्तिका पॉपअप बनाने की कोशिश कर रहा हूं, यह काम करता है लेकिन पॉपअप बबल मार्कर के साथ गठबंधन नहीं है।

यहां एक स्क्रीनशॉट है, यह स्पष्ट है कि पॉपअप बबल मार्कर पर केंद्रित नहीं है।

यहाँ इसके अलावा यहाँ कोड

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

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', { 
     maxZoom: 18, 
     id: 'examples.map-i875mjb7' 
}).addTo(map); 


m = L.marker([51.5, -0.09]).addTo(map); 
m.bindPopup("<b>Hello world!</b><br />I am a popup<span id='a'></span>", {maxWidth: "none"}) 
m.openPopup(); 

$('#a').html('abcdefghijklmnopqrstuvwxyz') 

है एक न्यूनतम jsfiddle उदाहरण है कि समस्या का वर्णन करता है: http://jsfiddle.net/nk93shkt/

मैं इसे कैसे ठीक कर सकता हूँ?

Answer 1

ऐसा लगता है कि यह पुस्तिका जब यह प्रस्तुत करती है तो इन्फोबॉक्स की चौड़ाई निर्धारित कर रही है। आप इसे प्रदर्शित होने के बाद टेक्स्ट जोड़ रहे हैं, इसलिए पुस्तिका अब इसके वास्तविक आकार को नहीं जानता है, और इस प्रकार इसे ठीक से केंद्रित नहीं कर सकता है। ,

m = L.marker([51.5, -0.09]).addTo(map); 
m.bindPopup("<b>Hello world!</b><br />I am a popup<span></span>", {maxWidth: "none"}) 
m.openPopup(); 
var a = m.getPopup(); 
var b = a._content.replace("<span></span>","<span>asdasdasda</span>"); 
m.setPopupContent(b); 

JSFIDDLE

Answer 2

स्थिति शुरू में सेट हो जाता है तो आप मैन्युअल रूप से jQuery

साथ

m.openPopup(); 
adjustPopup('abcdefghijklmnopqrstuvwxyz<br>sdfsdfs<br>sdfsdfsdf'); 
function adjustPopup(html) 
{ 
    $('#a').html(html); 
    var $leaflet=$('#a').closest('div.leaflet-popup'); 
    var width=$leaflet.width(); 
    $leaflet.css({left:"-"+(width/2)+"px"}); 
} 

यह समायोजित कर सकते हैं:

इस थोड़ा घना उदाहरण में documentation से setPopupContent() विधि का प्रयास करें

Answer 3

मुझे यकीन नहीं है कि मूल उत्तर चुनने के बाद यह पत्रक के एपीआई में जोड़ा गया था, लेकिन आपको सक्षम होना चाहिए पॉपअप की सामग्री को बदलने के बाद विधि अद्यतन() का उपयोग करें।

http://leafletjs.com/reference.html#popup-update