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

、私は { 'IMAGE_URL' のような配列内の各アイテムは、AJAXを介してDBからあなたのフェッチアイコンJSON配列を仮定しています：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"); 
    }