使用Javascript在img元素图片指定位置添加标注文字的实现方法

下面是3种可直接落地的实现方式，优先级从高到低：

方案1：相对定位容器+绝对定位标注（最常用） #

这是兼容性最好、改动最小的方案，只需要给现有img套一层父容器，再添加标注元素即可：

实现代码 #

<!-- 给原img套相对定位父容器 -->
<div class="img-mark-wrapper">
  <img src="images/main/car_48725.png" alt="汽车">
  <!-- 每个数字标注对应一个span，坐标按需调整 -->
  <span class="mark" style="left: 42px; top: 156px">1</span>
  <span class="mark" style="left: 218px; top: 162px">2</span>
  <span class="mark" style="left: 87px; top: 36px">3</span>
</div>

.img-mark-wrapper {
  position: relative;
  display: inline-block; /* 父容器尺寸自动和图片保持一致 */
}
.img-mark-wrapper img {
  display: block; /* 消除图片默认下边距 */
}
.mark {
  position: absolute;
  /* 下面是标注的通用样式，可按需调整 */
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #f00;
  font-weight: bold;
  font-size: 14px;
  /* 让标注中心点对齐你指定的坐标，可选 */
  transform: translate(-50%, -50%);
}

坐标获取方式 #

直接在浏览器打开页面，按F12调出调试工具，鼠标移到图片对应位置，即可看到相对于图片的像素坐标，填入标注的left/top属性即可。如果图片是响应式自适应尺寸的，把left/top的单位换成百分比即可，例如你在宽1000px的原图上测得left是200px，换算后就是left: 20%，缩放图片时标注位置不会偏移。 #

方案2：背景图实现 #

如果你的图片不需要img标签的语义（比如不需要SEO抓取、不需要右键保存），可以直接把图片设为容器的背景，标注逻辑和方案1一致：

<div class="car-img">
  <span class="mark" style="left: 42px; top: 156px">1</span>
</div>

.car-img {
  position: relative;
  width: 800px; /* 和图片实际宽度一致 */
  height: 500px; /* 和图片实际高度一致 */
  background: url("images/main/car_48725.png") no-repeat;
  background-size: 100% 100%;
}

方案3：结合原生map+area标签（适合需要交互的场景） #

如果需要点击标注弹出详情等交互，可以搭配HTML原生的<map>``<area>标签定义热区，再用JS读取热区坐标动态生成标注，适合标注数量多、需要批量处理的场景。

内容的提问来源于stack exchange，提问作者nostradam