React Leaflet 地图在整个页面上渲染

Question

React Leaflet 地图在整个页面上渲染

javascriptreactjsleafletreact-leaflet

4

我对React和Leaflet相当新。我已经在一个简单的HTML页面中成功地使用了Leaflet。所以现在我正在尝试使用React制作一个更动态的网站。

我遇到的问题是，虽然可以将其渲染出来，但地图会分块显示在整个页面上。我在地图dev下面放了一个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;

我很想听听有关正在发生的事情以及我可以做什么来解决它的任何建议。

谢谢！

- Patrick

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrick · Accepted Answer

好的，我在发布后很快就解决了这个问题。我在 Github 上查看了发布的问题，找到了这个链接: https://github.com/PaulLeCam/react-leaflet/issues/1052

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