传单:将弹出窗口调整为图片大小 [英] Leaflet: adjust popup to picture size

问题描述

我试图在我的传单弹出窗口中包含图片，但是popup-size不能调整为图片大小.我在github上找到了解决方案:

I'm trying to include pictures in my leaflet popups, but the popup-size doesn't adjust to the picture size. I found a solution to this on github:

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

虽然该解决方案固定了弹出窗口的大小，但结果却发生了移动，并且弹出窗口没有出现在图标/标记上方的中心位置...可以通过任何方法进行更改吗?

While that solution fixes the size of the popup, the result is shifted and the popup doesn't show up centered over the icon/marker... Any way to change that?

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

另外，在我的情况下，其他建议的解决方案(在弹出窗口上设置maxWidth)也无济于事.弹出窗口的宽度始终为默认宽度300px ...

Also the other proposed solution (setting the maxWidth on the popup) doesn't help in my case. The popup width keeps on being the default width of 300px...

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

推荐答案

仅在弹出窗口中指定maxWidth: "auto"选项就足够了……

Simply specifying maxWidth: "auto" option on the popup seems enough…

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

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

编辑

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

Unfortunately, if the image is not loaded yet in browser cache, the popup will open right away with default size, and adjust its size but not its position once the image is fully loaded and displayed. As a result, the popup is shifted and its arrow is misplaced compared to the marker it is bound to.

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

A simple workaround is to listen to the image "load" event and to re-open the popup at that moment:

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().

Here is a more general solution: capture the <IMG>'s "load" event on all Leaflet popups and force them to update() every time.

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/

参考资料:传单#5484(评论)

这篇关于传单:将弹出窗口调整为图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！