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

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

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

尝试这个略显冗长的例子中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