如何在背景图片上叠加pin图标实现模拟地图悬停显示地址效果

方案1：纯原生实现（无任何第三方依赖，最轻量） #

不需要引入任何插件，只用基础HTML+CSS+JS即可实现需求，实现逻辑如下：

• 外层容器设置为相对定位，尺寸和你的底图尺寸保持一致，底图放在容器最底层，设置层级低于标记
• 每个pin标记设置为绝对定位，通过top、left属性调整到你需要的位置，用data-*自定义属性存储对应地址信息
• 悬浮提示框同样设为绝对定位，默认隐藏，hover到pin时读取对应地址信息，调整提示框位置后显示即可

参考代码示例 #

<!-- 基础结构 -->
<div class="sim-map-container" style="position: relative; width: 800px; height: 600px;">
  <!-- 底图 -->
  <img src="你的底图本地路径" alt="模拟地图底图" style="width: 100%; height: 100%; z-index: 1;">
  <!-- pin标记，可按需添加多个 -->
  <div class="map-pin" data-address="北京市朝阳区XX路123号" style="position: absolute; top: 120px; left: 240px; width: 24px; height: 32px; cursor: pointer; z-index: 2;">
    <img src="你的pin图标本地路径" style="width: 100%;">
  </div>
  <div class="map-pin" data-address="上海市浦东新区XX路456号" style="position: absolute; top: 350px; left: 520px; width: 24px; height: 32px; cursor: pointer; z-index: 2;">
    <img src="你的pin图标本地路径" style="width: 100%;">
  </div>
  <!-- 地址悬浮提示框 -->
  <div class="address-tip" style="position: absolute; display: none; background: #ffffff; padding: 6px 10px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); z-index: 9;">
  </div>
</div>

// 交互逻辑
const allPins = document.querySelectorAll('.map-pin')
const tipBox = document.querySelector('.address-tip')

allPins.forEach(pin => {
  // 鼠标悬浮显示地址
  pin.addEventListener('mouseenter', e => {
    const currentPin = e.currentTarget
    tipBox.textContent = currentPin.dataset.address
    // 提示框位置可根据需求自行调整偏移量
    tipBox.style.left = `${currentPin.offsetLeft + 28}px`
    tipBox.style.top = `${currentPin.offsetTop}px`
    tipBox.style.display = 'block'
  })
  // 鼠标离开隐藏地址
  pin.addEventListener('mouseleave', () => {
    tipBox.style.display = 'none'
  })
})

方案2：轻量插件实现（支持更多扩展功能） #

如果需要额外的交互能力（比如标记选中态、简单缩放、点击跳转等），可以使用 Image Mapster 这款jQuery插件，体积仅几十KB，没有冗余的真实地图相关功能，专门为静态图片添加交互标记设计，完全符合你的轻量化需求。

内容的提问来源于stack exchange，提问作者J. Santiago