使用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

Since you provided very little information, i am assuming your fetching icon json array from db via AJAX each item in array like { 'image_url' : 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");
    }