Leaflet popup.update() 大小调整解决方案 - 每次都重新创建一个弹出窗口，无法点击嵌入式 URL

Question

我应用了@ghybs 提供的 popup.update() 代码片段，它可以很好地调整弹出窗口以适应地图框架，您可以在此处看到代码：

document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) {
  var tagName = event.target.tagName,
      popup = map._popup;
  console.log("got load event from " + tagName);
  if (tagName === "IMG" && popup) {
    popup.update();
  }
}, true);

问题是我在每个弹出窗口的缩略图中嵌入了 url。当我去点击缩略图时，光标指示 'click' 应该是可能的，但它没有做任何事情。当我右键单击缩略图时，我可以在新选项卡中打开 url。所以 url 在那里，只是没有按照我想要的方式工作。我和一个朋友查看了代码，我们确定 javascript 弹出窗口不断被重新创建。他建议这可能是更新电话，但不确定。如果有办法阻止 javascript 不断重新创建弹出窗口，那么这可能会解决问题。

他还注意到，当他从运行停止 javascript 时，url 只能在缩略图的下半部分（特别是 14px 高）点击，而它应该是占据整个缩略图（通常为 250 像素）。

当我在更新后立即检查 console.log(popup) 时，它陷入了无限循环。我猜这是问题的核心。有没有办法在更新弹出窗口大小后停止更新？我希望这会释放嵌入的 URL 以便可以点击，但我也希望 link 的高度与整个缩略图相匹配。

作为参考，我从 geojson 文件中提取点并对每个点应用相同的方法，如下所示：

var clusters = L.markerClusterGroup({maxClusterRadius:75});
var getjson = $.getJSON("map-v2.geojson",function(data){
  var bev = L.geoJson(data,{
    pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng, { tags: feature.properties.Genres.concat(feature.properties.Creator)});
      marker.bindPopup('<p align=center>' + '<strong>Title: </strong>' + feature.properties.Title + '<br/><a href="' + feature.properties.Image_Bank_URL + '" target="_blank"><img src="' + feature.properties.Thumbnail_URL + '"/></a><br/>' + '<strong>Date: </strong>' + feature.properties.Date + '<br/>' + '<strong>Creator: </strong>' + feature.properties.Creator + feature.properties.Genre, {minWidth : 250});
      return marker;
    }
  });
  clusters.addLayer(bev);
  map.addLayer(clusters);
});

Answer 1

欢迎来到 SO！

嗯，当您将弹出内容指定为包含 <img> 的 HTML 字符串时，given workaround 确实创建了一个无限循环。发生的事情是，当图像完成加载时，popup.update() 使用 HTML 字符串重置 Popup 内容，因此重新创建 <img> 元素，它发出一个新的 "load"事件，即使现在它来自浏览器缓存。然后监听器再次执行popup.update()等

演示（打开 Web 控制台以查看无限循环日志记录 "got load event from IMG"）：

var map = L.map('map').setView([48.86, 2.35], 11);

// Modify the cache busting value to force browser fetching from network.
var imgSrc = 'https://a.tile.openstreetmap.org/0/0/0.png?bust=1';
var popupContent =
  '<a href="https://a.tile.openstreetmap.org/0/0/0.png" target="_blank">' +
  '<img src="' + imgSrc + '"/></a>';

L.marker([48.86, 2.35]).addTo(map).bindPopup(popupContent);

document.querySelector(".leaflet-popup-pane").addEventListener("load", function(event) {
  var tagName = event.target.tagName,
    popup = map._popup;
  console.log("got load event from " + tagName);
  if (tagName === "IMG" && popup) {
    popup.update();
  }
}, true);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet-src.js" integrity="sha512-GosS1/T5Q7ZMS2cvsPm9klzqijS+dUz8zgSLnyP1iMRu6q360mvgZ4d1DmMRP2TDEEyCT6C16aB7Vj1yhGT1LA==" crossorigin=""></script>

<div id="map"></div>

在你的情况下，如果你确定在任何给定时间只会打开 1 个弹出窗口，并且它只包含一个 <img>，你可以简单地首先设置一个标志 "load" 该弹出窗口上的事件，以防止无限循环：

var map = L.map('map').setView([48.86, 2.35], 11);

// Modify the cache busting value to force browser fetching from network.
var imgSrc = 'https://a.tile.openstreetmap.org/0/0/0.png?bust=2';
var popupContent =
  '<a href="https://a.tile.openstreetmap.org/0/0/0.png" target="_blank">' +
  '<img src="' + imgSrc + '"/></a>';

L.marker([48.86, 2.35]).addTo(map).bindPopup(popupContent);

document.querySelector(".leaflet-popup-pane").addEventListener("load", function(event) {
  var tagName = event.target.tagName,
    popup = map._popup;
  console.log("got load event from " + tagName);
  // Also check if flag is already set.
  if (tagName === "IMG" && popup && !popup._updated) {
    popup._updated = true; // Set flag to prevent looping.
    popup.update();
  }
}, true);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet-src.js" integrity="sha512-GosS1/T5Q7ZMS2cvsPm9klzqijS+dUz8zgSLnyP1iMRu6q360mvgZ4d1DmMRP2TDEEyCT6C16aB7Vj1yhGT1LA==" crossorigin=""></script>

<div id="map"></div>

（请注意，SO 代码片段似乎阻止了 <a href> link 的打开，所以这里有一个 Plunk 来检查 link 是否正常打开：https://next.plnkr.co/edit/ore09Yxmm6DVmJGc)

现在概括一下HTML字符串中包含任意数量图片的情况，当可以同时打开多个Popups时，我们可以想象：

在 "popupopen" and each image "load" events, check if all Popup images have a non zero naturalWidth 上，否则更新。
在每个图像上存储对 Popup 的引用，这样我们就不必求助于读取 map._popup（仅引用最后打开的 Popup）。

var map = L.map('map', {
  closePopupOnClick: false
}).setView([48.86, 2.35], 11);

// Modify the cache busting value to force browser fetching from network.
var imgSrc1 = 'https://a.tile.openstreetmap.org/0/0/0.png?bust=3';
var imgSrc2 = 'https://a.tile.openstreetmap.org/11/1037/704.png?bust=3';
var popupContent =
  '<a href="' + imgSrc1 + '" target="_blank">' +
  '<img src="' + imgSrc1 + '"/></a>' +
  '<a href="' + imgSrc2 + '" target="_blank">' +
  '<img src="' + imgSrc2 + '"/></a>';

L.marker([48.86, 2.35]).addTo(map).bindPopup(popupContent, {
  autoClose: false
}).on('click', function() {
  // Open another Popup after this one.
  m2.openPopup();
});

var m2 = L.marker([48.86, 2.32]).bindPopup('Second Popup', {
  autoClose: false
}).addTo(map);

// Prepare the Popup when it opens.
map.on('popupopen', function(event) {
  var popup = event.popup;
  popup._imgAllSized = popupImgAllSized(popup);
});

document.querySelector(".leaflet-popup-pane").addEventListener("load", function(event) {
  var target = event.target,
    tagName = target.tagName,
    popup = target._popup;
  console.log("got load event from " + tagName);
  // Also check the Popup "_imgAllSized" flag.
  if (tagName === "IMG" && popup && !popup._imgAllSized) {
    console.log('updated');
    // Update the flag, in case all images have finished loading.
    popup.update();
    popup._imgAllSized = popupImgAllSized(popup);
  }
}, true);

function popupImgAllSized(popup) {
  // Get the HTMLElement holding the Popup content.
  var container = popup._contentNode;
  var imgs = container.querySelectorAll('img');
  var imgAllSized = true;
  for (var i = 0; i < imgs.length; i += 1) {
    // Store reference to popup in <img>
    imgs[i]._popup = popup;
    // Check if the image has unknown size.
    if (!imgs[i].naturalWidth) {
      imgAllSized = false;
    }
  }
  console.log(imgAllSized);
  return imgAllSized;
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

html,
body,
#map {
  height: 100%;
  margin: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet-src.js" integrity="sha512-GosS1/T5Q7ZMS2cvsPm9klzqijS+dUz8zgSLnyP1iMRu6q360mvgZ4d1DmMRP2TDEEyCT6C16aB7Vj1yhGT1LA==" crossorigin=""></script>

<div id="map"></div>

然后我们甚至可以通过尝试 update as soon as the images have their naturalWidth 来进一步改进此解决方案，而不是等待它们的 "load" 事件，这样即使浏览器仍在获取它们，Popup 大小和位置已更新。

Leaflet popup.update() 大小调整解决方案 - 每次都重新创建一个弹出窗口，无法点击嵌入式 URL

Leaflet popup.update() Resizing Solution - Recreating a Popup Everytime, Unable to Click Embedded URL

javascript

popup

leaflet