使用React Leaflet时地图无法正常加载

嘿，我之前也踩过React Leaflet地图加载异常的坑，给你几个实用的排查方向，应该能解决你的问题：

• 别忘了引入Leaflet的CSS文件：React Leaflet本身是基于Leaflet开发的，必须依赖它的样式文件才能正常渲染瓦片。你只需要在你的App.js或者项目入口文件里加上这行代码就行：

  import 'leaflet/dist/leaflet.css';
  

  很多新手第一次用都会漏掉这一步，结果地图要么瓦片错位重叠，要么直接显示空白。

• 给MapContainer设置高度：MapContainer组件默认是没有高度的，你得给它指定具体高度才能让地图显示出来。比如在你的App.css里添加这段样式：

  .leaflet-container {
    height: 400px; /* 可以根据需求调整，比如用100vh让地图占满整个视口高度 */
    width: 100%;
  }
  

  要是没设置高度，你可能只会看到一条窄线，甚至完全看不到地图区域。

• 检查TileLayer的配置是否完整：你代码里的attribution内容好像没写完，而且TileLayer必须要有正确的瓦片地址才能加载地图。比如完整的TileLayer配置大概是这样的：

  <TileLayer
    attribution='&copy; 地图贡献者'
    url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  />
  

  要是url格式不对或者attribution的语法有问题，瓦片资源也会加载失败。

• 确认依赖版本兼容：react-leaflet和leaflet的版本得匹配才行，比如react-leaflet v4.x需要搭配leaflet v1.9.x以上的版本。你可以打开package.json看看这两个包的版本号，要是不兼容就升级或者降级到对应的版本，版本不匹配很容易出现各种奇怪的渲染异常。

备注：内容来源于stack exchange，提问作者Max9874