react-leaflet 地图显示异常（如瓦片错位、空白或碎片化）通常是因为缺少 Leaflet 核心 CSS 文件，只需在使用地图的组件中显式导入 leaflet/dist/leaflet.css 即可解决。

react-leaflet 地图显示异常（如瓦片错位、空白或碎片化）通常是因为缺少 leaflet 核心 css 文件，只需在使用地图的组件中显式导入 `leaflet/dist/leaflet.css` 即可解决。

在 React 项目中集成 react-leaflet 时，一个常见却容易被忽略的关键步骤是：必须手动引入 Leaflet 的样式文件。react-leaflet 本身仅提供 React 绑定逻辑，不自动注入其所需的 CSS（如图层定位、缩放控件布局、瓦片容器尺寸重置等），而这些样式对地图正常渲染至关重要。若缺失，就会出现你截图中典型的“地图瓦片错位、网格断裂、标记偏移或整体空白”等问题。

✅ 正确做法是在 GeographyChart 组件顶部添加 CSS 导入语句：

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css"; // ✅ 必须添加这一行

⚠️ 注意事项：

react-modernization

将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新

下载

• 不要将其放在 index.css 或全局样式中（除非确保加载顺序早于地图组件挂载）；推荐就近导入到实际使用 <mapcontainer></mapcontainer> 的组件内，以保障样式及时生效；
• 若使用 CSS 模块或主题定制，需额外覆盖 .leaflet-container 的 height 和 width —— 当前代码中 <div> 设置了 <code>height: "100%"，但其父容器（如 MUI Box）若未设置明确高度，会导致地图容器高度塌陷。建议补充内联样式或类名约束：

  <div style={{ width: "100%", height: "500px", border: "1px solid #ccc" }}>
    <MapContainer
      center={[51.505, -0.09]}
      zoom={15}
      style={{ height: "100%", width: "100%" }} // ✅ 显式传递 style 给 MapContainer
    >
      {/* ... */}
    </MapContainer>
  </div>

  此外，MapContainer 的 width/height 属性（如你代码中的 width={500} height={500}）已被废弃（v4+ 版本不再支持 props 控制尺寸），应改用 CSS style 控制容器大小。

  ? 额外调试建议：

  • 检查浏览器控制台是否报出 404 错误（如 marker-icon.png 加载失败）——这通常意味着 Leaflet 图标路径未正确配置，可通过以下代码临时修复（放入组件初始化处）：

  import { Icon } from "leaflet";
  delete (Icon.Default as any).prototype._getIconUrl;
  Icon.Default.mergeOptions({
    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
  });

  完成上述修改后，重新运行应用，地图即可正确渲染完整瓦片与交互元素。记住：CSS 是 react-leaflet 正常工作的基础设施，不可省略。