javascript - 传单:将弹出窗口调整为图片大小

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/

---

编辑

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

一个简单的解决方法是听图像 "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

这是一个更通用的解决方案:捕获 <IMG>的 "load"所有 Leaflet 弹出窗口上的事件并强制它们到 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)