使用JQuery在另一个图像的顶部放置x和y坐标的位置图标

Question

我有一个图像，我想在其上放置一个图标。该图标具有相对于大图像的x和y坐标。我如何使用jQuery和CSS将它们定位在顶层？我想将图标附加到图像上，因为我有许多图标，我想动态添加它们。

这是HTML：

<div class="panel-body" id="image-class"> 
    <img id="map-view" src="/image1.png"> 
</div> 

这是CSS：

#map-view { 
    height: 100%; 
    width: 100%; 
    object-fit: contain; 
} 

预先感谢您。

Answer 1

由于您提供的资料非常少，我假设从DB你取图标JSON数组通过AJAX像 { '图片网址' 在阵列中的每个项目：icon_url 的 'x'：50， 'Y'：10 }
CSS：

#image-class{ 
position:absolute; 
} 

#image-class .icon{ 
position: relative; 
} 

JS：

// list_of_icons is from db via AJAX or somthing 
    for(var i=0;i<count(list_of_icons);i++) 
    { 
     $("<img />").attr('src',list_of_images[i].img_url).addClass('icon').css({top:list_of_images[i].y+'px',left:list_of_images[i].x+'px'}).appendTo("#image-class"); 
    }