我有以下地图图像：
任务：我需要使用使之成为可能的手段和技术来绘制这样的地图，并在其上放置点（标记），以指示城市。此外，单击标记时，应出现带有城市名称的弹出提示（工具提示）。
- 如果无法使用代码再现（绘制）地图，则允许使用其图像。这可以通过两种方式完成：通过应用属性将其用作背景图像，
background或者使用标签将其作为带有图像的文件插入，<img>通过src.
变体background：
div {
width: 800px;
height: 506px;
background: url(https://isstatic.askoverflow.dev/0lfnZ.jpg);
}<div></div>使用标签的变体<img>：
<img src="https://isstatic.askoverflow.dev/0lfnZ.jpg">- 有必要通过表示城市的坐标点（标记）在此地图上放置。怎么可能做到这一点？
这是标记代码：
span {
display: block;
position: relative;
margin: 30px auto;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
span:hover::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: red;
animation: animate 1.5s infinite normal ease-out;
}
@keyframes animate {
from {
transform: scale(0);
opacity: .5
}
to {
transform: scale(2);
opacity: 0;
}
}<span></span>以下是城市列表：
<p>Севастополь</p>
<p>Симферополь</p>
<p>Евпатория</p>
<p>Феодосия</p>
<p>Керчь</p>
<p>Ялта</p>- 单击标记时，工具提示应显示城市名称。怎么可能做到这一点？例如，这样的工具提示应该如下所示（它的形状、颜色、大小无关紧要），如下所示：
建议通过任何方式并借助问号中指示的任何技术来解决问题。特别欢迎对您的实现进行详细描述。
结果应该是这样的：
jsfiddle
#1 工具提示
如果您将鼠标悬停在一个对象上，那么一段时间后，系统
tooltipSVG 将出现，其中包含在标签之间添加的文本<title>#2。城市标志
下面是 Dzhankoy 区的代码，其中添加了圆圈和城市名称作为标记
#3。悬停时缩放区域
完整代码： Codepen
虽然我设法用 477k ==> 25k 优化了源代码，但代码不适合片段
地图被插入为带有图片的文件，使用标签
<img>，通过src.position表示城市的点（标记）通过使用属性和值相对于地图图像的绝对定位方法放置在地图上absolute。带有城市名称的工具提示（工具提示）的外观是通过使用伪类将鼠标光标悬停在标记上来实现的
:hover。