leaflet.js 中的工具提示闪烁，因此用户无法点击其中的 link

Question

我正在使用 bindTool 提示创建带有 html 的弹出元素和其中的链接

.bindTooltip(function (layer) {
  let tooltip1 =
    "<h2>" +
    layer.feature.properties.NAME +
    '</h2> <a href="' +
    layer.feature.properties.LINK +
    '" target="_blank">' +
    '<img src="' +
    layer.feature.properties.IMAGE +
    '" width=300></a>';
  return tooltip1;
}, customOptions)

在自定义选项中我有以下内容

  className: "popupCustom",
  interactive: true,

编辑 - 工具提示悬停时出现闪烁 - 它似乎同时激活了鼠标悬停和鼠标移开。

我正在这里的故障项目中处理这个项目/

代码 - https://glitch.com/edit/#!/leaflet-map-3valleys?path=script.js%3A95%3A0

生成的地图 - https://leaflet-map-3valleys.glitch.me/

我应该更改什么才能使其正确/一致？

Answer 1

我在 CSS 中尝试使用指针事件，但这仍然无法按预期工作

我试过了

.popupCustom {
  pointer-events: false; 
}

和

.popupCustom {
  pointer-events: auto; 
}

但闪烁仍然存在。但无论如何，由于工具提示包含 link，因此它需要处于活动状态。

Answer 2

你确定这是你的问题吗？
毕竟，点击弹出窗口中的图标几乎是不可能的。这个 window 闪烁得如此之快，你真的需要成为 CS:GO 的世界冠军才能拍摄点击 ;)

下面是它的外观的 gif 动图。它不反映闪烁速度，因为它是一个优化的 GIF，但我向你保证问题是你同时使用 mouseover 和 mouseout。

--- 编辑 ---

它不再疯狂眨眼了，只剩下一眨眼了，但你会自己解决这个问题;)

// make the map
let map = L.map("map", {
  center: [53.713, -2.096],
  zoom: 16,
  scrollWheelZoom: false,
});
// add the basemap tiles
L.tileLayer(
  "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png" // stamen toner tiles
).addTo(map);

let geojson; // this is global because of resetHighlight

// change style
function highlightFeature(e) {
  const layer = e.target;

  layer.setStyle({
    weight: 3, // thicker border
    color: "#000", // black
    fillOpacity: 0.5, // a bit transparent
  });

  layer.openPopup();
}

// reset to normal style
function resetHighlight(e) {
  const layer = e.target;

  geojson.resetStyle(layer);

  if (layer.isPopupOpen()) {
    layer.closePopup();
  }
}

// zoom to feature (a.k.a. fit the bounds of the map to the bounds of the feature
function zoomToFeature(e) {
  map.fitBounds(e.target.getBounds());
}

// attach the event handlers to events
function onEachFeature(feature, layer) {
  const popupcontent = `
    <a href="${layer.feature.properties.LINK}" target="_blank">
      <h2>${layer.feature.properties.NAME}</h2>
      <img src="${layer.feature.properties.IMAGE}" width=300>
    </a>`;

  const content = L.DomUtil.create("div", "popup-content");
  content.insertAdjacentHTML("afterbegin", popupcontent);
  const myPopup = L.popup().setContent(content);
  layer.bindPopup(myPopup);

  content.addEventListener("mouseenter", (e) => {
    if (e.target.closest(".leaflet-popup")) {
      layer.openPopup();
      console.log("mouseover");
    }
  });

  content.addEventListener("mouseleave", (e) => {
    if (e.target.closest(".leaflet-popup")) {
      console.log("mouseleave");
      layer.closePopup();
    }
  });

  layer.on("mouseover", highlightFeature);
  layer.on("mouseout", resetHighlight);
  layer.on("click", zoomToFeature);
}

// get the data
fetch("https://leaflet-map-3valleys.glitch.me/data/tod_data.json")
  .then((response) => response.json())
  .then((json) => doThingsWithData(json));

// once the data is loaded, this function takes over
function doThingsWithData(json) {
  // assign colors to each "PATTERN" (a.k.a. Game Mechanics)
  let colorObj = assignColors(json, "PATTERN");
  // add the data to the map
  geojson = L.geoJSON(json, {
    style: function (feature) {
      return {
        color: colorObj[feature.properties.PATTERN], // set color based on colorObj
        weight: 2.7, // thickness of the border
        fillOpacity: 0.6, // opacity of the fill
      };
    },
    onEachFeature,
  }).addTo(map); // add it to the map
}

// create an object where each unique value in prop is a key and
// each key has a color as its value
function assignColors(json, prop) {
  // from ColorBrewer http://colorbrewer2.org
  let colors = [
    "#6a3d9a",
    "#ffff99",
    "#b15928",
    "#a6cee3",
    "#1f78b4",
    "#b2df8a",
    "#33a02c",
    "#fb9a99",
    "#e31a1c",
    "#fdbf6f",
    "#ff7f00",
    "#cab2d6",
  ];
  let uniquePropValues = []; // create an empty array to hold the unique values
  json.features.forEach((feature) => {
    // for each feature
    if (uniquePropValues.indexOf(feature.properties[prop]) === -1) {
      uniquePropValues.push(feature.properties[prop]); // if the value isn't already in the list, add it
    }
  });
  let colorObj = {}; // create an empty object
  uniquePropValues.forEach((prop, index) => {
    // for each unique value
    colorObj[prop] = colors[index]; // add a new key-value pair to colorObj
  });
  return colorObj;
}

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

html {
  height: 100%;
}

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

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

<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 id="map"></div>

leaflet.js 中的工具提示闪烁，因此用户无法点击其中的 link

Tooltip in leaflet.js flickers so users can't click on link inside it

javascript

maps

hover

leaflet