如何在特定x和y坐标的图像上添加图像

Question

我正在构建一个可拖动的游戏地图，（地图开始作为学校项目，我将其转移到游戏中）地图的链接是here

我想在特定位置在此图片上添加第二张图片，无论地图在其容器中的拖动位置。

这是jquery：

$(function() { 
    $("#map").draggable({
        cursor: 'move',
        containment: [-525, -582, 252, 40]
    });
});

HTML

<div id="mapable" style="position: relative;float:left;height:423px;width:1072px;overflow:hidden;border:1px solid black;">
    <img src="include/map.png" style="display:block;border:1px solid black;position: absolute;" onclick="point_it(event);" class="drag-image" id="map"/>
</div>

有关所有代码的完整来源，您可以查看here