允许指针事件传播到 mapbox 地图

Question

我正在使用 mapbox 显示给定线路的最近 ping 的脉动图标。意思是，我有一条由多个 ping 位置组成的 geojson 线，我目前正在做的是当我将鼠标悬停在该线上时，我会找到最近的 ping 并显示它。

现在的问题是此 ping 有一个弹出窗口，显示有关每个 ping 的一些特定信息。在某些情况下，此弹出窗口会覆盖该行，从而阻止地图上的 mousemove 事件。这使得最近的 ping 不会一直显示，因为离我的光标位置最近的 ping 会在弹出窗口下方。任何人都知道如何解决这个问题？我尝试了一些方法，包括将 pointer-events: auto 添加到弹出窗口。

Here is a codepen 显示我在说什么

Answer 1

你们非常亲密。正确答案是 pointer-events: none;

Updated codepen.

（编辑 - 约翰）

对于其他人来说，我需要将一些弹出窗口设置为“只读”，以传递事件，同时让其他弹出窗口保持原样。 Steve 是正确的，将指针事件设置为 none 是可行的，但是没有办法通过 CSS 来设置父元素的样式（也称为弹出内容 class）。当我想显示它时，我最终将 class 添加到弹出窗口内容元素。因为 Mapbox 不支持这一点，所以你必须稍微处理一下。 您在渲染周期中对弹出窗口进行的最后一次 change/update 必须是 class 更新，否则 Mapbox 将删除 class

CSS
.no-pointer-events {
    pointer-events: none !important;
}

JS
const popup = marker.getPopup();
popup.setHTML(... html here ...)
if (!popup.isOpen()) {
    marker.togglePopup();
}
popup._content && popup._content.classList.add('no-pointer-events');

允许指针事件传播到 mapbox 地图

Allow pointer event to propagate to mapbox map

mapbox-gl-js

（编辑 - 约翰）