如何解决如何在 React-Leaflet 地图上覆盖一个 div?
我想在我的 React-Leaflet 地图上创建一张卡片,显示地图的一些细节。 但我的第一个问题是,我不能在地图顶部过度使用我的 div(卡片容器)。 这是我的代码:
class SimpleExample extends React.Component {
constructor() {
super()
this.state = {
lat: 51.505,lng: -0.09,zoom: 13
}
}
render() {
const position = [this.state.lat,this.state.lng];
return (
<LeafletMap center={position} zoom={this.state.zoom}
id='mapDiv'
>
<div
style={{
width: 500,height: 500,top: 0,left: 0,backgroundColor: 'red',zIndex: 10
}}
/>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br/> Easily customizable.
</Popup>
</Marker>
</LeafletMap>
);
}
}
ReactDOM.render(<SimpleExample />,document.getElementById('container'))```
解决方法
让你的 div 成为地图容器的兄弟,而不是孩子:
<div
className="container"
style={{
position: 'relative'
width: 500,height: 500
}}
>
<div
style={{
position: 'absolute'
width: 500,height: 500,top: 0,left: 0,zIndex: 10000
}}
/>
<LeafletMap {...props}>
{mapChildren}
</LeafletMap>
</div>
您可以在此处查看带有香草传单的示例:Make Select Option Display on top of Leaflet Map
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。