传单如何使用js制作动态图片弹出窗口

【问题标题】：leaflet how to make dynamic picture popup using js传单如何使用js制作动态图片弹出窗口
【发布时间】：2017-03-23 07:29:00
【问题描述】：

您好，我正在使用传单在地图上显示动态图像：我有一个 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);

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

【问题讨论】：

【解决方案1】：

我最好的猜测是（因为您没有分享完整的代码并且没有添加示例）您正在尝试访问 ID 为 images 的元素，但它尚未附加到 DOM。当弹出窗口打开时，您作为弹出内容提供的 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';

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

【讨论】：