如何实现点击<area>热区时弹出带图文内容的自定义弹窗

解决方案 #

你已经引入了Featherlight弹窗组件，适配<area>标签点击弹窗的需求非常简单，以下是两种可直接用的实现方案：

方案1：提前定义弹窗内容（适合内容差异大的场景）

1. 首先在页面任意位置添加每个热区对应的隐藏内容块，id和<area>标签的href锚点保持一致：

<!-- 炼油厂对应弹窗内容 -->
<div id="refinery" class="popup-content" style="display:none;">
  <h3>West Side Refinery</h3>
  <p>2 Tracks, 10 cars</p>
  <img src="./images/refinery.jpg" alt="Refinery">
</div>
<!-- 废料场对应弹窗内容 -->
<div id="scrapyard" class="popup-content" style="display:none;">
  <h3>Scrapyard</h3>
  <p>3 Tracks, 8 cars</p>
  <img src="./images/scrapyard.jpg" alt="Scrapyard">
</div>
<!-- 其余热区的内容块按同样规则补充即可 -->

2. 在你现有的JS引入代码后面添加这段初始化代码即可：

$(function() {
  // 直接给所有area标签绑定featherlight弹窗，会自动读取href对应的隐藏内容渲染
  $('area').featherlight({
    closeOnClick: 'background', // 点击弹窗背景自动关闭
    closeIcon: '×'
  });
})

方案2：动态生成弹窗内容（更省代码，适合统一结构的弹窗）

如果所有弹窗的结构都是统一的（标题+说明文字+图片），不需要单独写隐藏内容块，直接加这段JS即可：

$(function() {
  $('area').on('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转
    const $currentArea = $(this);
    // 动态拼接弹窗内容，可根据你要展示的字段调整
    const popupContent = `
      <h3>${$currentArea.attr('alt')}</h3>
      ${$currentArea.attr('title') ? `<p>${$currentArea.attr('title')}</p>` : ''}
      <img src="./images/${$currentArea.attr('target')}.jpg" alt="${$currentArea.attr('alt')}">
    `;
    // 调用featherlight打开弹窗
    $.featherlight(popupContent, {
      closeOnClick: 'background'
    });
  })
})

只需要提前把所有热区的图片命名为和<area>的target属性一致的文件名，放在对应路径下即可，不需要额外写HTML内容块。

如果需要调整弹窗样式，直接覆盖featherlight的默认CSS即可改成你要的谷歌地图弹窗样式。

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