javascript - 向 React Leaflet map 添加标题

Question

我有一个相对简单的问题，尝试向传单 map 添加标题，类似于下图。

我看过类似 R: Add title to Leaflet map 的帖子，但一直没能找到react的例子。

我的代码如下所示

import L from 'leaflet';
import {Map, TileLayer, Marker, Popup} from 'react-leaflet';

class App extends Component {
  render(){
     return (
        <div>
        <Map className="splitViewMap" style={{'fillColor': 'yellow'}}>
         <TileLayer
           attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> 
           contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
       </Map>
       </div>
    );
  }
}
export default App;

Answer 1

您可以将 position:absolute 设置为“ map 标题”并执行以下操作:

class App extends Component {
  render() {
    return (
      <div
        style={{
          position: "relative",
          display: "flex",
          justifyContent: "center"
        }}
      >
        <Map className="splitViewMap" style={{ fillColor: "yellow" }}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a>
           contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </Map>
        <h1
          style={{
            position: "absolute",
            backgroundColor: "white",
            bottom: "20px",
            zIndex: "99"
          }}
        >
          Map Title
        </h1>
      </div>
    );
  }
}

实例:

function App() {
  return (
    <div className="app">
      <div className="map" />
      <h1 className="map-title">Map Title</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.app {
  position: relative;
  display: flex;
  justify-content: center;
}
.map {
  height: 200px;
  width: 100%;
  background: rgb(209, 209, 209);
}

.map-title {
  position: absolute;
  background: white;
  bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>