如何在 React-Leaflet 地图上覆盖 div？

Question

我想在我的 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='&copy; <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'))```

Answer 1

让您的 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>

您可以在此处查看普通传单的示例：在传单地图顶部显示选择选项