Popoletto di volantini con contenuto dinamico non centrato sul marker

Question

Sto tentando di creare un popup di volantino con contenuto dinamico, funziona ma la bolla popup non è allineata con il marcatore.

Ecco uno screenshot, è chiaro che la bolla popup non è centrata sul marcatore.

Ecco il codice

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') 

Anche qui è un esempio jsfiddle minimo che descrive il problema: http://jsfiddle.net/nk93shkt/

Come posso risolvere questo problema?

Answer 1

Sembra che il volantino stia determinando la larghezza dell'infobox quando lo esegue. Stai aggiungendo del testo dopo che è stato visualizzato in modo che il volantino non conosca più le sue dimensioni effettive e quindi non possa centrarlo correttamente.

provare il metodo setPopupContent() dal documentation in questo esempio un po 'prolisso:

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

La posizione viene impostata inizialmente, così da poter regolare manualmente con 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"}); 
} 

Answer 3

Non sono sicuro che sia stato aggiunto all'API di Leaflet dopo aver scelto la risposta originale, ma dovresti essere in grado di usa il metodo update() dopo aver cambiato il contenuto del popup.

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