WordPress可滚动长图可点击区域地图实现 点击弹出带图tooltip方案咨询

核心思路 #

所有适配问题本质是固定像素坐标不兼容图片缩放、页面滚动，只要把坐标逻辑换成相对比例计算，同时适配tooltip的视口位置即可，以下是3种可直接落地的方案： #

方案1：纯前端自定义实现（灵活度最高） #

不用依赖第三方工具，可完全自定义交互样式，适配所有长度的长图：

• 外层套相对定位容器：给长图加父容器，设置position: relative;，长图本身设置max-width: 100%; height: auto;保证响应式缩放，不需要限制容器高度，适配页面原生滚动
• 点位用相对比例定位：提前计算每个可点击点位在原图宽高中的占比，比如原图高3000px，点位距离顶部1200px，那点位的top值就设为40%，left值同理用宽度占比设置，所有点位设置position: absolute;，层级高于图片即可
• tooltip动态适配位置：显示tooltip前先获取触发点位当前在视口的坐标，如果点位靠近视口底部，就把tooltip展示在点位上方，反之展示在下方，避免tooltip超出视口被截断
• WordPress集成：可以把点位坐标、tooltip内容做成页面自定义字段，后台上传长图时直接填写参数，无需修改代码

核心代码示例

CSS样式

/* 长图容器 */
.long-img-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.long-img-container > img {
  display: block;
  width: 100%;
  height: auto;
}
/* 可点击点位 */
.img-hotspot {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 50, 50, 0.7);
  cursor: pointer;
  transform: translate(-50%, -50%); /* 让坐标对应点位中心 */
  z-index: 10;
}
/* tooltip弹窗 */
.hotspot-tip {
  position: absolute;
  display: none;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  width: 260px;
  z-index: 20;
}
.hotspot-tip.show {
  display: block;
}

JS交互逻辑

// 点位点击触发tooltip
document.querySelectorAll('.img-hotspot').forEach(spot => {
  spot.addEventListener('click', e => {
    e.stopPropagation();
    // 隐藏其他已打开的tooltip
    document.querySelectorAll('.hotspot-tip.show').forEach(tip => tip.classList.remove('show'));
    const currentTip = spot.querySelector('.hotspot-tip');
    const spotRect = spot.getBoundingClientRect();
    const viewHeight = window.innerHeight;
    // 调整tooltip位置避免超出视口
    if (spotRect.bottom + 10 > viewHeight) {
      currentTip.style.top = 'auto';
      currentTip.style.bottom = 'calc(100% + 8px)';
    } else {
      currentTip.style.bottom = 'auto';
      currentTip.style.top = 'calc(100% + 8px)';
    }
    currentTip.classList.add('show');
  })
})
// 点击页面空白处关闭所有tooltip
document.addEventListener('click', () => {
  document.querySelectorAll('.hotspot-tip.show').forEach(tip => tip.classList.remove('show'));
})

WordPress页面嵌入方式

编辑页面时添加「自定义HTML」块，插入以下结构即可：

<div class="long-img-container">
  <img src="你的长图地址" alt="长图描述">
  <!-- 点位1 -->
  <div class="img-hotspot" style="left: 25%; top: 30%;">
    <div class="hotspot-tip">
      点位1的描述内容，支持插入图片、文本等任意HTML
    </div>
  </div>
  <!-- 点位2，按需添加多个 -->
  <div class="img-hotspot" style="left: 60%; top: 75%;">
    <div class="hotspot-tip">
      点位2的描述内容
    </div>
  </div>
</div>

方案2：WordPress插件实现（零代码） #

直接使用支持响应式热区的图片映射插件，后台可可视化拖拽设置热区位置，插件已自动适配长图滚动、图片缩放场景，只需要在热区的点击动作配置里设置自定义HTML内容作为tooltip即可，无需写代码。 #

方案3：Canvas实现（适合交互复杂的场景） #

如果需要添加更多自定义交互（比如悬停动画、点位高亮），可以把长图渲染到Canvas元素中：

• 监听Canvas的点击事件，计算点击位置相对于Canvas的坐标，和预先存储的点位坐标阈值匹配
• 坐标同样用宽高占比换算，适配不同屏幕尺寸
• 匹配到对应点位后，在点击位置展示tooltip即可

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