为 React 传单地图添加标题答案

【问题标题】：Adding Title to React Leaflet Map为 React 传单地图添加标题
【发布时间】：2021-09-12 13:50:42
【问题描述】：

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

我看过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;

【问题讨论】：

标签： javascript css reactjs leaflet react-leaflet

【解决方案1】：

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

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>

【讨论】：

谢谢 - 这很有帮助。您是否知道如何将标题添加为 TileLayer？
对不起，我还没用过。所以...我没有线索

【解决方案2】：

答案真的很简单（虽然很粗糙！）

在 div 元素中包含地图和标题文本：

<div>
<div className="title">Title</div>
    <Map className="map">
    </Map>
</div>

使用 z-index 元素的 css：

.map{
  height: 90vh;
  width: 100vh;
  position:absolute;
  bottom:10px;
  right:10px;
  z-index: 0;
}

.title {
  position:absolute;
  bottom:300px;
  right:420px;
  font-weight: bold;
  font-weight: 900;
  font-size: 30px;
  background-color: rgb(207, 207, 207); 
  z-index: 1;
}

允许将标题放置在地图上！

【讨论】：