如何在 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 成为地图容器的兄弟，而不是 child:

<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

如何在 React-Leaflet 地图上叠加 div？

How to overlay a div on a React-Leaflet map?

leaflet

reactjs

react-leaflet