0

我的弹出窗口中的文本无法选择。我可以通过单击等方式关闭弹出窗口，但是当将指针悬停在文本上时，指针仍保持为手形图标，并且永远不会变为 I 形文本选择图标。我尝试了几种不同的方式添加弹出窗口，但无济于事：

//with visgl/react-mapbox-gl:
<Popup latitude={0.0} longitude={0.0}>this text is unselectable</Popup>

//via the regular api:
new MapboxGL.Popup()
    .setLngLat([0.0, 0.0])
    .setHtml(<h1>this text is also unselectable</h1>)
    .addTo(map);

//this method that I copied from somewhere:
const placeholder = document.createElement('div');
ReactDOM.render(<h1>still unselectable</h1>, placeholder);
new MapboxGL.Popup()
     .setDOMContent(placeholder)
     .setLngLat()
     .addTo(map);

在Mapbox 示例中，它们的文本是可选择的。知道为什么我的不是吗？谢谢。

4

1 回答 1

1

我相信如果没有运行示例，将很难找到确切的原因。这里有一些想法：

  • 使用他们在内容示例中使用的相同类：mapboxgl-popup-content
  • 检查 HTML 并查看文本顶部是否没有某种不可见的分层元素。在 Browser DevTools 的“Inspector”（Firefox）或“Elements”（Chrome）选项卡中，通过悬停标签，您将能够看到每个渲染元素的边界框，如下所示：

在此处输入图像描述

  • 与前一点类似，检查z-index渲染元素中的 CSS 属性以查看是否有内容没有分层

最后，还有cursor CSS 属性，您可以使用它来强制显示光标。

于 2020-05-21T08:27:14.277 回答