弹出某些图像点来显示文本

Question

我有这样的地图图像：

我在谷歌搜索但我找不到。

我想知道当鼠标悬停在某些点上时是否有JS或Jquery库来实现一些弹出窗口或工具提示，并显示该图像中每个点的描述。

例如，如果我将鼠标放在USA上，我想显示一些弹出窗口，如果我将鼠标放在墨西哥上，我想要另一个。如果有任何例子，我很感激。此致

Answer 1

您可以使用包含多个<map>元素的<area>来创建可点击区域，并在其上收听click个事件。

然后，您需要阻止默认调用Event.preventDefault()并以您想要的任何方式处理它，例如在地图上打开弹出窗口或叠加层。

这是一个简单的例子，您可以点击美国：

document.getElementById('mapMap').onclick = (e) => {
    e.preventDefault();
    
    if (e.target.dataset.country === 'US') {
      alert('Hi!');
    }
};

body {
  margin: 0;
}

#mapImage {
  max-width: 420px;
}

<img id="mapImage" src="https://i.stack.imgur.com/C2Mha.png" usemap="#map">

<map id="mapMap" name="map">
  <area data-country="US" shape="poly" coords="54,70,119,68,96,94,59,86,54,79" href="#">
</map>

此方法的主要问题是<area>坐标是以CSS像素定义的，因此您需要使用JavaScript根据图像的大小重新计算坐标，除非它始终具有相同的大小

David Thomas在此提供了一个实现：Is possible create map html area in percentage?

然后，另一个限制是您无法在<area>元素上应用悬停样式，但同样，您可以使用JavaScript来绘制<area>的形状，使用其shape <canvas>上的}和coords个属性，并使用pointer-events: none覆盖地图，以防止它获取<area>的{​​{3}}。

MouseEvents (click, hover...)也提供了这里的实现：enhzflep

另一种选择可能是使用How to apply Hovering on html area tag?而不是<svg>，它可以很好地处理所有这些。

Answer 2

您可以使用mapael这是一个开源的jQuery插件，可以提供您所要求的内容。

选中此demo，此处更多examples

点击此处查看Github源代码。