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

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

这里是一个更通用的解决方案:捕捉<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/

参考:传单问题#5484(评论)

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