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

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

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/

Answer 2

要对齐bindPopup文本，请执行以下操作

marker.bindPopup('<div id="popupcontent" class="centerClass"></div>');

CSS

.centerClass{
  text-align: center;
}

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

2 个答案: