Wyskakujące okienko z treścią dynamiczną niepośrodkowaną nad znacznikiem

Question

Próbuję utworzyć wyskakujące okienka z treścią dynamiczną, działa, ale dymek wyskakujący nie jest wyrównany z znacznikiem.

Oto zrzut ekranu, z którego wynika, że ​​bąbel wyskakujący nie jest wyśrodkowany nad znacznikiem.

Oto kod

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

Również tutaj jest minimalny jsfiddle przykładem, który opisuje problem: http://jsfiddle.net/nk93shkt/

Jak mogę rozwiązać ten problem?

Answer 1

Wygląda na to, że ulotka określa szerokość infobox podczas renderowania. Dodajesz tekst po jego wyświetleniu, więc ulotka nie zna już jej rzeczywistego rozmiaru, a zatem nie może wyśrodkować poprawnie.

Wypróbuj metodę z documentationsetPopupContent() w tym nieco rozwlekły przykład:

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

Stanowisko zostanie ustawiony na początku, więc można ją skorygować ręcznie z 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

Nie jestem pewien, czy został dodany do API Ulotki po wybraniu oryginalnej odpowiedzi, ale powinieneś być w stanie użyj metody update() po zmianie treści popup.

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