jquery - 动态加载内容时传单弹出窗口未对齐

Question

当动态加载其内容时，我遇到了弹出窗口未对齐的问题，例如 JSFiddle:http://jsfiddle.net/7616xqbb/2/

使用 Leaflet 0.7.2 :

var new_marker = L.marker([lat, lon])
        .bindPopup("<div id='popupcontent'></div>", {maxWidth: 500, maxHeight: 300})
        .on('click', function(e){
            $.post("updatecontent.php", {lat: lat, lon: lon},
            function(data) {
                $('#popupcontent').html(data);
            });
        });

map.addLayer(new_marker, true);

其中 updatecontent.php 显示一组图像。

我首先在调整弹出窗口的大小以适应其内容时遇到了麻烦。这段 CSS 可以解决问题:

.leaflet-popup-content {
     width:auto !important;
     height:auto !important;
}

但是弹出窗口在打开时发生了变化...

有什么想法吗？谢谢:)

Answer 1

在设置弹出窗口的内容后，您应该将弹出窗口绑定(bind)到您的标记

var popup = new L.Popup();

marker.addTo(map);

marker.on('click', function(e) { 
    popup.setContent('Hello world');
    marker.bindPopup(popup);
    marker.openPopup();
});

http://jsfiddle.net/FranceImage/79w2mtod/