Leaflet Popup mit dynamischem Inhalt nicht zentriert über Marker

Question

Ich versuche, ein Popup mit dynamischen Inhalt zu erstellen, aber es funktioniert, aber die Popup-Blase ist nicht mit dem Marker ausgerichtet.

Hier ist ein Screenshot, es ist klar, dass die Popup-Blase nicht über den Marker zentriert ist.

Hier ist der Code

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

Auch hier ist ein minimales jsfiddle Beispiel, die das Problem beschreibt: http://jsfiddle.net/nk93shkt/

Wie kann ich dieses Problem beheben?

Answer 1

Es sieht so aus, als ob die Broschüre die Breite der Infobox beim Rendern bestimmt. Sie fügen Text nach der Anzeige hinzu, sodass die aktuelle Größe der Broschüre nicht mehr bekannt ist und daher nicht richtig zentriert werden kann.

Versuchen Sie, die setPopupContent() Methode aus der documentation in diesem etwas langatmig Beispiel:

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

Die Position zunächst eingestellt wird, so dass Sie es manuell mit 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"}); 
} 

einstellen könnte

Answer 3

Ich bin mir nicht sicher, ob dies zu Leaflet API hinzugefügt wurde, nachdem die ursprüngliche Antwort gewählt wurde, aber Sie sollten in der Lage sein Verwenden Sie method update(), nachdem Sie den Inhalt des Popups geändert haben.

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