React Leaflet 地图渲染遍布整个页面

Question

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

我遇到的问题是我可以让它进行渲染。地图以块的形式出现在整个页面上。我在地图开发下方放置了一个 h1 和一个带有文本的简单 div，您可以看到它随机渲染到下方的文本后面。它也不是一张连续的地图。

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

这是我的应用程序代码：

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 的事实。啊。