Question

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

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

虽然该解决方案修复了弹出窗口的大小，但结果会被移动，弹出窗口不会显示在图标/标记的中心位置......有什么方法可以改变它吗？

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

screenshot from 2016-07-03 14 19 25

另一个提议的解决方案（在弹出窗口中设置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});
}

screenshot from 2016-07-03 14 49 15

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>的{{1}}事件，并每次强制它们"load"。

update()

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

参考：Leaflet issue #5484 (comment)

Answer 2

弹出窗口有一个更新功能（文档说的就是这个目的）：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 3

更通用和简单的解决方案是使用 html 类和来自 popup 类的函数 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 4

我在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 5

None of the before added answers worked for me, but I came upon a quite simple solution (the link of which I can no longer find). Just wrap your image in a div:

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

And add a simple css rule that corresponds to the image width:

    .ppcont{width:100px;}

Now the popup should load correctly and it solves the need for updates or closing/opening again.

Answer 6

要以编码理解能力有限的人的身份处理此问题，从QGIS 3.10导出enter code here网络地图时，我终于在qgis2web插件的输出中为我工作。首先，我将所有照片的宽度设置为相同的宽度-在我的情况下为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});

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

6 个答案: