找到了一个很棒的传单地图代码。当我将鼠标悬停在每篇 html 文章上时，我希望显示带有弹跳图钉或闪烁图标的 PIN 位置

Question

我有以下代码：

当我将鼠标悬停在 html 文章上时，我想在地图上显示带有通知的图钉。通知可以采用 PIN 位置顶部的属性形式、来自 css 的闪烁图标、弹跳图钉。当我悬停在当前的 html 文章上时，通知应该只针对它。

当我将鼠标悬停在文章上时，我想在地图上显示它的位置，使用弹跳图钉或由 css 制作的闪烁图标来精确定位位置。或者很简单，显示当前文章的属性（标题），以便我可以将 pin 位置与其他位置区分开来

// config map
let config = {
  minZoom: 7,
  maxZoom: 18,
  zoomControl: false, // zoom control off
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;
// calling map
const map = L.map("map", config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// reactivate zoom at the desired location
// [topleft, topright, bottomleft, bottomright]
L.control
  .zoom({
    position: "topright",
  })
  .addTo(map);
// holder for all articles
const articles = document.querySelectorAll("article");

const group = L.featureGroup();

articles.forEach((article) => {
  const coordinates = article.dataset.coordinates;
  const title = article.dataset.title;

  const marker = L.marker(JSON.parse(coordinates));

  marker.addTo(group).bindPopup(title);
});

group.addTo(map);

map.fitBounds(group.getBounds(), {
  padding: [50, 50], // adding padding to map
});

*,
: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;
}

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/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>