动态加载内容时传单弹出未对齐答案

【问题标题】：Leaflet popup misaligned when loading content dynamically动态加载内容时传单弹出未对齐
【发布时间】：2022-03-07 19:23:09
【问题描述】：

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

使用传单 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;
}

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

有什么想法吗？谢谢:)

【问题讨论】：

标签： jquery css popup alignment leaflet

【解决方案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/

【讨论】：

是的，但这不是动态加载内容。我需要将 $.post 请求的结果设置到弹出窗口中。
只要把setContent、bindPopup、openPopup放到你的$.post的回调中就可以了。

【解决方案2】：

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

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

CSS

.centerClass{
  text-align: center;
}

【讨论】：

【解决方案3】：

试试这个

const DefaultIcon = L.icon({
  iconUrl: ....,
  shadowUrl: ....,
  popupAnchor: [x, y] // point from which the popup should open relative to
});

尝试根据 x 和 y 对齐它，就是这样，我希望你觉得它有用。

【讨论】：