Javascript 创建艺术地图并在特定坐标处放置html

大家好，我有一个noob问题，我想创建一个小岛的自定义地图，我写了自定义的原因，这将是一个艺术的手写地图，在这张地图上，我将放置一些链接，位置和标记。在第一个时刻，我使用地图和区域标记将链接放置在特定的坐标处，但我认为在定义的区域标记中插入html是不可能的，因为我放置在区域标记中的所有内容都将在地图图像下方结束，因此，我不得不在编辑地图图像时放置标记和位置，我真的不喜欢这种解决方案。。那么，在特定坐标处向图像中插入文本、标记或html的最佳实践是什么呢？在这一刻，我使用图像容器中任何元素的绝对位置，然后使用top和left，我可以放置html任意软件。。但这很难适应所有屏幕尺寸，尤其是移动设备

我正在报告上一个解决方案的一些代码

HTML

这是地图标签不起作用的解决方案

HTML

---

您可能希望包含一些代码，以举例说明您到目前为止到底尝试了什么。它有助于建立一些东西。我包括了一些代码，希望它能帮助找到一个起点

<div id=container>
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa- 
lefkada.png" alt="Lefkada" width="320" height="500" border="0" 
usemap="#Map">
</div>
<div id="location-html"><span>Genion</span></div>
</div>

#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}

<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa- 
lefkada.png" alt="Lefkada" width="320" height="500" border="0" 
usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="330,219,406,234" href="#" alt="Genion">
<div id="location-html"><span>Genion</span>
</area>
</map>
</div>
</div>

#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}