Mapbox GL 弹出文本不可选择
Mapbox GL popup text is unselectable
我的弹出窗口中的文本无法选择。我可以通过点击等方式关闭弹出窗口,但是当将指针悬停在文本上时,指针仍然是手形图标,并且永远不会变成 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);
我相信如果没有 运行 示例,很难找到确切原因。以下是一些想法:
- 使用他们在内容示例中使用的相同 class:
mapboxgl-popup-content
- 检查 HTML 并查看文本顶部是否有某种不可见的分层元素。从 Browser DevTools,在 "Inspector" (Firefox) 或 "Elements" (Chrome) 选项卡中,通过将鼠标悬停在标签上,您将能够看到每个渲染元素的边界框,例如所以:
- 与之前的点类似,检查渲染元素中的
z-index
CSS 属性 以查看是否有内容未分层
最后,还有 cursor CSS 属性 可以用来强制显示光标。
我的弹出窗口中的文本无法选择。我可以通过点击等方式关闭弹出窗口,但是当将指针悬停在文本上时,指针仍然是手形图标,并且永远不会变成 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);
我相信如果没有 运行 示例,很难找到确切原因。以下是一些想法:
- 使用他们在内容示例中使用的相同 class:
mapboxgl-popup-content
- 检查 HTML 并查看文本顶部是否有某种不可见的分层元素。从 Browser DevTools,在 "Inspector" (Firefox) 或 "Elements" (Chrome) 选项卡中,通过将鼠标悬停在标签上,您将能够看到每个渲染元素的边界框,例如所以:
- 与之前的点类似,检查渲染元素中的
z-index
CSS 属性 以查看是否有内容未分层
最后,还有 cursor CSS 属性 可以用来强制显示光标。