传单如何使用js制作动态图片弹出窗口 [英] leaflet how to make dynamic picture popup using js

问题描述

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

  var img =http：//xx.xx.xx.xx/
 
 $（< img />）。attr（src，img ）.appendTo（ ＃图像）; 
  

我有一个弹出窗口（HTML），其中包含我的图片ID：images

  var marker = L.marker（[lat，lng]）。bindPopup（'< div id =images>< / div> ;'）AddTo就（地图）。 
  

但是图片没有显示在弹出窗口中？任何人都只是解决方案谢谢

解决方案

我最好的猜测是（因为您没有分享您的完整代码并且没有添加示例）尝试访问id为 images 的元素时，它尚未附加到DOM。您弹出内容时提供的HTML字符串会变成实际元素，并在弹出窗口打开时附加到DOM上。

这里最好的选择是不使用HTML字符串作为弹出窗口的内容，但实际的HTML元素，并保留一个引用：

  //创建元素
 var div = DomUtil.create（'div'，'my-div'）; 
  

使用元素作为弹出内容：

  //创建带有内容的标记绑定弹出框并添加到地图; 
 new L.Marker（[0，0]）。bindPopup（div）.addTo（map）; 
  

现在您可以使用 div 添加新元素：

  //创建img元素并附加到div 
 var img = L.DomUtil.create（ 'img'，'my-img'，div）; 
 img.src ='http://placehold.it/100x100'; 
  

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

hello I am using leaflet to display dynamic images on a map: I have a var img which represent the url of image src

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

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

And I have a popup window(HTML) which include my images id:images

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

But the picture is not showing on the popup? anyone has simply solution? thanks

解决方案

My best guess is (since you didn't share your complete code and did not add an example) that you are trying to access the element with id images when it's not attached to the DOM yet. The HTML string you provided as popup content gets turned into an actual element and appended to the DOM when the popup opens.

Your best option here is to not use a HTML string as popup content but an actual HTML element and keep a reference:

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

Use the element as popup content:

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

Now you can use the div reference to append new elements:

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

This will work when the popup is opened and closed.

这篇关于传单如何使用js制作动态图片弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！