传单：将弹出窗口调整为图片大小

Question

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

https://github.com/Leaflet/Leaflet/issues/724

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

.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});
}

Answer 1

只需在弹出窗口中指定maxWidth: "auto" 选项似乎就足够了……

layer.bindPopup(popupContent, {
  maxWidth: "auto"
});

演示：http://jsfiddle.net/3v7hd2vx/29/

---

编辑

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

一个简单的解决方法是监听图像"load" 事件并在那一刻重新打开弹出窗口：

popupContent = document.createElement("img");
popupContent.onload = function () {
  layer.openPopup();
};
popupContent.src = "path/to/image";
layer.bindPopup(popupContent, {
  maxWidth: "auto"
});

更新的演示：http://jsfiddle.net/3v7hd2vx/32/

---

编辑 2

这是一个更通用的解决方案：在所有 Leaflet 弹出窗口上捕获 <IMG> 的 "load" 事件，并每次都强制它们到 update()。

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.

演示：https://jsfiddle.net/3v7hd2vx/277/

参考：Leaflet issue #5484 (comment)

Answer 2

更通用和简单的解决方案是使用 html 类和弹出类中的函数update

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

<img class="img-in-popup" src="/path/to/img.jpg">

然后在其中的任何图像完全加载时更新弹出窗口。

var map = L.map('map', mapOptions)
// add layers, etc

map.on('popupopen', function (e) {
  $('img.img-in-popup').on('load', function () {
    e.popup.update()
  })
})

请注意，如果多个图像在同一个弹出窗口中，popup.update() 将触发多次，但这实际上不是问题。

Answer 3

我在 Drupal 中使用基于 Leaflet 的地图时遇到了类似的问题，我需要在加载图像后更新弹出窗口，我设法根据 @frankieandshadow 的回答解决了这个问题。

这是我想出的代码：

$(function() {
   var mymap = Drupal.settings.leaflet[0].lMap;
   mymap.on("popupopen", function(e) {
     $(".leaflet-popup-content img:last").one("load", function() {
            e.popup.update();
         });
     });
});

Answer 4

• 有一个弹出窗口的更新功能（文档说就是为了这个目的）：http://leafletjs.com/reference.html#popup-update。

• 此外，打开弹出窗口时的事件：http://leafletjs.com/reference.html#path-popupopen。

• 并且传递给事件处理程序的事件标识弹出窗口：http://leafletjs.com/reference.html#popup-event-popup

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

所以当我遇到这个问题时，总结一下我使用 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(); });
    });
}

Answer 5

之前添加的答案都不适合我，但我找到了一个非常简单的解决方案（我再也找不到它的链接）。只需将您的图像包装在一个 div 中：

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

并添加一个简单的与图片宽度对应的css规则：

    .ppcont{width:100px;}

现在弹出窗口应该正确加载，它解决了更新或再次关闭/打开的需要。

Answer 6

作为编码理解有限的人来处理这个问题，当从 QGIS 3.10 导出enter code here web 的地图时，我终于在 qgis2web 插件的输出中为我工作了以下内容。我首先将我所有的照片设置为相同的宽度——在我的例子中是 400 像素。

然后在 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});