javascript - leaflet如何使用js制作动态图片弹出

Question

你好，我正在使用传单在 map 上显示动态图像:我有一个 var img 代表图像 src 的 url

var img="http://xx.xx.xx.xx/"

$("<img/>").attr("src", img).appendTo("#images");

我有一个弹出窗口(HTML)，其中包含我的图像 id:images

 var marker = L.marker([lat,lng]).bindPopup('<div id="images"></div>').addTo(map);

但是图片没有显示在弹出窗口上？有人有简单的解决方案吗？谢谢

Answer 1

我最好的猜测是(因为您没有分享完整的代码，也没有添加示例)，当它尚未附加到 DOM 时，您正在尝试访问 id 为 images 的元素。当弹出窗口打开时，您作为弹出内容提供的 HTML 字符串将转换为实际元素并附加到 DOM。

这里最好的选择是不使用 HTML 字符串作为弹出内容，而是使用实际的 HTML 元素并保留引用:

// Create element
var div = L.DomUtil.create('div', 'my-div');

使用该元素作为弹出内容:

// Create marker bind popup with content and add to map;
new L.Marker([0, 0]).bindPopup(div).addTo(map);

现在您可以使用 div 引用来附加新元素:

// Create img element and append to div
var img = L.DomUtil.create('img', 'my-img', div);
img.src = 'http://placehold.it/100x100';

这将在弹出窗口打开和关闭时起作用。