首次使用react-leaflet基础示例地图显示异常求助

出现这类问题的核心原因通常是缺少Leaflet的核心样式文件，或者地图容器未设置明确高度，以下是具体修复步骤：

1. 引入Leaflet CSS样式 #

react-leaflet不会自动导入Leaflet的基础样式，必须手动引入。在你的组件文件或项目入口文件（如index.js/App.js）中添加：

import 'leaflet/dist/leaflet.css';

2. 为MapContainer设置明确高度 #

默认情况下MapContainer没有高度限制，会导致瓦片渲染异常。可以直接通过内联样式或CSS类设置高度：

• 内联样式示例：

<MapContainer 
  center={[51.505, -0.09]} 
  zoom={13} 
  scrollWheelZoom={false}
  style={{ height: '100vh', width: '100%' }}
>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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>
</MapContainer>

• 或者通过CSS类设置：

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

然后给MapContainer添加className="leaflet-container"属性。

验证版本兼容性 #

你使用的版本组合（leaflet@1.9.4 + react-leaflet@4.2.1 + react@18.2.0）是兼容的，无需调整版本。

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