React Leaflet Map 无法正常显示问题求助

• 优先给MapContainer组件设置显式宽高
  你当前仅为父容器设置了宽高，而MapContainer默认无内置高度，无法继承父容器高度的情况非常普遍，直接对MapContainer组件添加宽高样式即可解决绝大多数无显示问题。
• 确认leaflet CSS加载正常
  不建议在index.html中引入静态CSS，改为在项目入口文件（如index.js）或地图组件顶部直接引入import 'leaflet/dist/leaflet.css'，同时打开浏览器控制台网络面板确认CSS文件加载无404错误，CSS加载失败会导致地图瓦片堆叠错乱，看起来完全无显示。
• 修复Marker默认图标路径异常
  前端打包工具（Webpack/Vite）默认不会正确解析Leaflet内置的Marker图标路径，会触发资源加载报错，影响地图渲染，需要手动配置图标路径。
• 确认依赖版本匹配
  @monsonjeremy/react-leaflet 对Leaflet版本有严格要求，比如3.x版本仅适配Leaflet 1.7.x版本，若安装的Leaflet版本过高会直接导致组件无法渲染，可检查package.json中依赖版本是否匹配要求。
• 针对构建工具做适配
  若使用Vite构建项目，此前针对babel-loader的修复方案不生效，需要在vite.config.js中添加配置optimizeDeps: { include: ['leaflet'] }，处理Leaflet的CommonJS模块兼容问题。

修正后可参考代码示例 #

import React from 'react'
import styled from '@emotion/styled'
import { MapContainer, TileLayer, Marker, Popup } from '@monsonjeremy/react-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

// 修复Marker图标路径问题
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: new URL('leaflet/dist/images/marker-icon-2x.png', import.meta.url).href,
  iconUrl: new URL('leaflet/dist/images/marker-icon.png', import.meta.url).href,
  shadowUrl: new URL('leaflet/dist/images/marker-shadow.png', import.meta.url).href,
})

// 直接为MapContainer设置宽高
const StyledMapContainer = styled(MapContainer)`
  height: 500px;
  width: 500px;
`

const Map = () => {
  return (
    <StyledMapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </StyledMapContainer>
  )
}

export default Map

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