React Leaflet地图渲染异常：碎片化铺满页面求助

问题原因 #

• 未引入Leaflet核心CSS：Leaflet的地图瓦片布局、容器样式依赖自身的CSS文件，缺少该文件会导致瓦片排列错乱，出现碎片化、溢出等问题。
• MapContainer未设置固定尺寸：默认状态下MapContainer没有指定宽高，浏览器无法确定其渲染区域，进而导致地图元素溢出到下方文本区域。

修复方案 #

1. 引入Leaflet核心CSS #

在你的App.js或项目入口文件（如index.js）中添加Leaflet CSS的导入：

import 'leaflet/dist/leaflet.css';

2. 给MapContainer设置固定尺寸 #

有两种方式可以实现：

方式一：直接通过内联样式设置

修改MapContainer组件，添加style属性指定宽高：

<MapContainer 
  center={[45.4, -75.7]} 
  zoom={12}
  scrollWheelZoom={false}
  style={{ width: '100%', height: '500px' }}
>

方式二：通过CSS类设置

在App.css中添加针对Leaflet容器的样式：

.leaflet-container {
  width: 100%;
  height: 500px;
}

修改后的完整代码示例 #

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

function App() {
  return (
    <div>
      <h1>See my map</h1>
      <MapContainer 
        center={[45.4, -75.7]} 
        zoom={12}
        scrollWheelZoom={false}
        style={{ width: '100%', height: '500px' }}
      >
        <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;

内容的提问来源于stack exchange，提问作者Patrick