单张弹出窗口，动态内容不以标记为中心

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

看起来传单正在确定信息框呈现时的宽度。您在显示文本后添加文本，因此传单不再知道其实际大小，因此无法正确居中。

在这个略显冗长的例子中，尝试documentation中的setPopupContent()方法：

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"});
}

Answer 3

我不确定在选择原始答案后是否将其添加到Leaflet的API中，但是您应该能够在更改弹出窗口的内容后使用方法update（）。

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

Answer 4

以防万一这是没有动态内容的任何人的问题；可以在this documentation

中查看任何自定义图标的偏移弹出窗口的问题

请参阅：

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

在示例中，并编辑popupAnchor:值以适合您的特定分区要求