React Leaflet 地图渲染遍及页面

Question

我对 React 和 Leaflet 还很陌生。我已经让 Leaflet 在一个简单的 HTML 页面中工作得很好。所以现在我正在尝试通过使用 React 来制作一个更加动态的网站。

我遇到的问题是我可以让它进行某种渲染。地图以块的形式出现在整个页面上。我在上面放了一个 h1，在 map dev 下面放了一个带有文本的简单 div，你可以看到它随机呈现在下面的文本后面。它也不是一个连续的地图。

我在 4.2.1 和 Leaflet 1.9.3 中使用 React v18.2.0 和 React Leaflet。

这是我的应用程序代码：

import React from 'react';
import './App.css';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function App() {
  return (
    <div>
      <h1>See my map</h1>
      <MapContainer center={[45.4, -75.7]} zoom={12}scrollWheelZoom={false}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
      <div>After map report</div>
    </div>
  );
}

export default App;

我很乐意就正在发生的事情以及我能做些什么来解决它提供任何建议。

谢谢！

Answer 1

好吧，所以我在发布后想得太快了。我正在研究 Github 中发布的问题，发现了这个：https://github.com/PaulLeCam/react-leaflet/issues/1052

显然，我用作指南的说明完全没有我需要导入 Leaflet css 的事实。呃