Javascript 传单：根据图片大小调整弹出窗口

我试图在我的传单弹出窗口中包含图片，但弹出窗口的大小不适应图片的大小。我在github上找到了解决方案：

虽然该解决方案修复了弹出窗口的大小，但结果会发生变化，弹出窗口不会显示在图标/标记的中心。。。有什么办法可以改变吗

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

另外，另一个建议的解决方案（在弹出窗口上设置maxWidth）对我的情况也没有帮助。弹出窗口的宽度一直是默认的300px的宽度

function pop_Fotos(feature, layer) {
     var popupContent = '<img style="max-height:500px;max-width:500px;" src="...");
     layer.bindPopup(popupContent, {maxWidth: 500, closeOnClick: true});
}

function pop_Fotos（功能、图层）{
var popupContent=
只需在弹出窗口中指定
maxWidth:“auto”
选项就足够了

layer.bindPopup（popupContent{
maxWidth：“自动”
});

演示：


编辑

不幸的是，如果图像尚未加载到浏览器缓存中，则弹出窗口将立即以默认大小打开，并在图像完全加载和显示后调整其大小，但不调整其位置。因此，弹出窗口会移动，其箭头与绑定到的标记相比放置错误

一个简单的解决方法是收听image
“load”
事件，并在此时重新打开弹出窗口：

popupContent=document.createElement（“img”）；
popupContent.onload=函数（）{
layer.openPopup（）；
};
popupContent.src=“path/to/image”；
layer.bindPopup（弹出内容{
maxWidth：“自动”
});

更新的演示：


编辑2

这里有一个更通用的解决方案：在所有传单弹出窗口上捕获
的
加载“
事件，并强制它们每次
更新（）

document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) {
  var tagName = event.target.tagName,
      popup = map._popup; // Currently open popup, if any.

  if (tagName === "IMG" && popup) {
    popup.update();
  }
}, true); // Capture the load event, because it does not bubble.

演示：

参考资料：

有一个弹出窗口的更新功能（文档中说就是为了这个目的）：

此外，打开弹出窗口时的事件：

传递给事件处理程序的事件标识弹出窗口：


我的弹出内容比一个简单的图像要多样化一些，但是宽度当然仍然受到内容中图像加载时间的影响（一旦图像进入浏览器缓存，就可以了）

因此，当我遇到这个问题时，总结一下我使用jQuery所做的工作：

function addpopup(mymarker, mycontent) {
    var myid = "thismarker"; // or whatever
    mymarker.bindPopup("<div id='"+myid+"'>" + mycontent + "</div>",
      {maxWidth: "auto"});
    mymap.on("popupopen", function(e){
        $("#"+myid+" img").one("load", function(){ e.popup.update(); });
    });
}

函数addpopup（mymarker，mycontent）{
var myid=“thismarker”；//或其他
mymarker.bindpoop（“+mycontent+”，
{maxWidth:“自动”}）；
mymap.on（“popupopen”，函数（e）{
$（“#”+myid+“img”）.one（“加载”，函数（）{e.popup.update（）；}）；
});
}
我在Drupal中遇到了一个类似的问题，我需要在加载图像后更新弹出窗口，并根据@frankieandshadow的回答解决了这个问题

下面是我想出的代码：


$（函数（）{
var mymap=Drupal.settings.传单[0].lMap；
mymap.on（“popupopen”，函数（e）{
$（“.传单弹出内容img:last”）.one（“加载”，函数（）{
e、 popup.update（）；
});
});
})
之前添加的答案对我来说都不管用，但我找到了一个非常简单的解决方案（我再也找不到它的链接）。只需将您的图像包装在一个div中：

    <div class='ppcont'><img src='yourimg.jpg' /></div>

现在，弹出窗口应该正确加载，它解决了更新或再次关闭/打开的需要。
作为一个对编码理解有限的人来处理这个问题，我最终在qgis2web插件的输出中获得了以下内容，在导出地图时为
在这里输入代码
QGIS 3.10中的web。我首先制作了所有照片它的宽度是一样的——在我的例子中是400px

然后在index.html文件中，我将minWidth设置为400px，如下所示

var popupContent = '<table>\
                <tr>\
                    <th scope="row"></th>\
                    <td>' + (feature.properties['Name'] !== null ? autolinker.link(feature.properties['Name'].toLocaleString()) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2"><img src="' + feature.properties['RelPath'] + '"</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 700, minWidth:400});

var-popupContent='0\
\
\
'+（feature.properties['Name']！==null？autolinker.link（feature.properties['Name'].toLocaleString（））：''）+'\
\
\
\
\
';
bindPopup（popupContent，{maxHeight:700，minWidth:400}）；
一个更通用、更简单的解决方案是使用html类和函数
从弹出类更新

在弹出窗口中的每个图像上添加一个特定的类



然后，当其中的任何图像完全加载时，只需更新弹出窗口即可

var-map=L.map（'map'，mapOptions）
//添加图层等
map.on（'popupopen'，函数（e）{
$（'img.img in popup'）。on（'load'，function（）{
e、 popup.update（）
})
})

请注意，
popup.update（）
如果同一弹出窗口中有多个图像，则会触发多次，但这实际上不是问题。
Hey@ghybs，感谢您的回答。但是，移动的弹出窗口的问题仍然存在（请参阅问题中的第一张图片）。弹出窗口的指针不再位于标记的顶部。有什么办法处理吗？看起来这只是图像加载的问题。加载图像后，您只需重新打开弹出窗口。我将更新答案。很好，效果很好！非常感谢！还有一个问题：如何设置img元素的最大宽度？I f我想我可以设置一个。我必须通过CSS吗？（我应该针对哪个元素？
传单弹出内容。img
？）很抱歉，我错过了你评论的最后一部分。你可以轻松地在
img
元素上添加你自己的类。如果你需要帮助，请随时打开一个新问题。这里提出了一个改进的解决方案：
var popupContent = '<table>\
                <tr>\
                    <th scope="row"></th>\
                    <td>' + (feature.properties['Name'] !== null ? autolinker.link(feature.properties['Name'].toLocaleString()) : '') + '</td>\
                </tr>\
                <tr>\
                    <td colspan="2"><img src="' + feature.properties['RelPath'] + '"</td>\
                </tr>\
            </table>';
        layer.bindPopup(popupContent, {maxHeight: 700, minWidth:400});