实现HTML文章hover时Leaflet地图对应标记的动态提示效果

需求：鼠标悬停在每个HTML article 元素上时，地图中对应的标记需触发提示效果（可选择弹出标题弹窗、标记弹跳或CSS闪烁），且仅当前悬停的article对应标记生效。

修改后完整代码 #

HTML 代码 #

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" />
<div class="story-content flex">
  <div class="story">
    <article data-coordinates="[-17.981680132859903, -70.22885519135282]" data-title="title 1">
      <h2>Title 1</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos, accusantium odit?
      </p>
    </article>
    <article data-coordinates="[-17.982343728408157, -70.22992798111379]" data-title="title 2">
      <h2>Title 2</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos, accusantium odit?
      </p>
    </article>
    <article data-coordinates="[-18.00728838751793, -70.24685472283247]" data-title="title 3">
      <h2>Title 3</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos, accusantium odit?
      </p>
    </article>
  </div>
  <div id="map"></div>
</div>

CSS 代码（新增标记闪烁动画与文章悬停样式） #

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.story-content {
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
  flex-direction: row;
}

.story {
  background: #fff;
  width: 550px;
  overflow-y: auto;
}

.story article {
  padding: 30px 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.story article:hover {
  background-color: #f8f8f8;
}

/* 标记闪烁动画 */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.blink-marker {
  animation: blink 1s infinite;
}

JavaScript 代码（实现悬停联动逻辑） #

// 配置地图参数
let config = {
  minZoom: 7,
  maxZoom: 18,
  zoomControl: false, // 关闭默认缩放控件
};

// 初始化地图
const map = L.map("map", config);

// 添加OpenStreetMap瓦片图层
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '© OpenStreetMap contributors',
}).addTo(map);

// 添加自定义位置的缩放控件
L.control
  .zoom({
    position: "topright",
  })
  .addTo(map);

// 获取所有文章元素
const articles = document.querySelectorAll("article");
const group = L.featureGroup();

// 遍历文章，创建对应标记并绑定联动事件
articles.forEach((article) => {
  const coordinates = JSON.parse(article.dataset.coordinates);
  const title = article.dataset.title;

  // 创建标记
  const marker = L.marker(coordinates);
  marker.addTo(group).bindPopup(title);

  // 给文章绑定对应的标记，用于后续事件触发
  article._marker = marker;

  // 鼠标悬停事件：打开弹窗并添加闪烁效果
  article.addEventListener("mouseover", () => {
    marker.openPopup();
    // 获取标记的图标元素，添加闪烁类
    const iconElement = marker.getElement();
    iconElement.classList.add("blink-marker");
  });

  // 鼠标离开事件：关闭弹窗并移除闪烁效果
  article.addEventListener("mouseout", () => {
    marker.closePopup();
    const iconElement = marker.getElement();
    iconElement.classList.remove("blink-marker");
  });
});

// 将标记组添加到地图，并自动适配边界
group.addTo(map);
map.fitBounds(group.getBounds(), {
  padding: [50, 50], // 添加边界内边距
});

实现说明 #

1. 关联文章与标记：通过给每个article元素附加_marker属性，建立文章和对应地图标记的关联关系。
2. 悬停交互逻辑：
   • 鼠标悬停文章时，打开对应标记的弹窗，并给标记图标添加CSS闪烁动画。
   • 鼠标离开文章时，关闭弹窗并移除闪烁动画。
3. 视觉反馈：给文章添加悬停背景色变化，增强用户感知；标记的闪烁动画直观提示当前关联位置。

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