在 html 和 css 中特定位置的图像上插入 html 标签

Inserting html tags on image at specific positions in html and css

我有这张图片 Map.png。我想使用 html 在这些位置框中写入文本。 这样我就可以动态地改变它。 我只是不知道该怎么做..请给我一个方向。

有几种方法可以做到这一点。

  1. 简单的方法是仅使用 css 绝对 属性 和 top/left 属性将位置图标定位在 map.png 之上。将 map.png 添加到 div 并使 div css 位置相对。在 top/left 属性 添加每个位置图标,并确保位置图标 css 位置是绝对的。

  2. 更好的方法是使用 Google Map Api。在 Google 地图上为您 map.png 的州绘制多边形,然后放置 Google 位置标记。更加流畅且非常易于使用。