Javascript 传单弹出窗口，动态内容不在标记上居中

我正在尝试创建一个带有动态内容的传单弹出窗口，它可以工作，但弹出的气泡没有与标记对齐

这是一个屏幕截图，很明显弹出的气泡没有在标记上居中。

这是密码

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

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（地图）；
m=L.标记（[51.5，-0.09]）。添加到（地图）；
m、 bindPopup（“你好，世界！
我是一个弹出窗口，{maxWidth:“无”}）
m、 openPopup（）；
$（'a'）.html（'abcdefghijklmnopqrstuvxyz'））

这里还有一个简单的JSFIDLE示例，描述了该问题：

---

如何修复此问题？

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

在这个稍微冗长的示例中，请尝试来自的

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

m=L.marker（[51.5，-0.09]）.addTo（map）；
m、 bindPopup（“你好，世界！
我是一个弹出窗口，{maxWidth:“无”}）
m、 openPopup（）；
var a=m.getPopup（）；
var b=a._content.replace（“，“ASDASDA”）；
m、 设置PopupContent（b）；

---

最初设置位置，因此您可以使用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"});
}

m.openPopup（）；
调整弹出窗口（'abcdefghijklmnopqrstuvxyz
sdfsdfs
sdfsdfsdf'）；
函数弹出窗口（html）
{
$（'a'）.html（html）；
变量$传单=$（'a'）。最近（'div.传单弹出窗口'）；
var width=$foliate.width（）；
$ployate.css（{左：“-”+（宽度/2）+“px”}）；
}

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

---

以防这对任何没有动态内容的人来说都是一个问题；任何自定义图标的偏移弹出窗口问题可在中探讨

见：

从示例中选择并编辑

popupAnchor:

值以满足您的特定分区要求

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