使用基于 .PNG 图像的可点击图标创建地图？答案

【问题标题】：Creating a map with clickable icons based on a .PNG image?使用基于 .PNG 图像的可点击图标创建地图？
【发布时间】：2025-11-21 13:15:01
【问题描述】：

我有一张英国地图的 png 图像，我想在地图上的坐标处放置图钉图标，单击该图标会将您重定向到包含有关该位置的更多信息的页面。

我尝试过使用<map> 和<area>，但是据我所知，区域元素不能有图标。

我也尝试过在地图上绝对定位一个图标，但是一旦我切换分辨率，我的定位就被破坏了。

以前有没有人这样做过或者对如何做有任何想法？谢谢。

【问题讨论】：

“我也尝试过在地图上绝对定位图标，但是一旦切换分辨率，我的定位就被破坏了。” 你能发布代码吗？你试过了吗？
请参阅How to Ask。您需要展示您的尝试并提出更具体的问题。
这能回答你的问题吗？ *.com/questions/54508374/…

标签： javascript html css

【解决方案1】：

在使用带有百分比的绝对定位之前，我已经成功地做到了这一点。你只需要对你的百分比值非常精确。这是一个在伦敦上带有 PNG 标记的快速示例，当我调整它的大小时效果很好：

.container {
  max-width: 800px;
  min-width: 300px;
  position: relative;
}

.container img.map {
  width: 100%;
  height: auto;
}

.marker {
  position: absolute;
  z-index: 1;
  width: 8%;
}

.marker img {
  width: 100%;
  height: auto;
}

.marker.first {
  top: 74.5%;
  left: 78.7%;
}

<div class="container">
  <img class="map" src="https://geology.com/world/united-kingdom-map.gif" />
  
  <div class="marker first">
    <img src="https://static.thenounproject.com/png/5025-200.png" />
  </div>
</div>

【讨论】：