React Leaflet地图显示空白求助：已配置CSS和高度仍无效

针对你遇到的React Leaflet地图空白问题，可尝试以下几个配置调整：

1. 替换TileLayer的HTTP地址为HTTPS #

当前使用的OpenStreetMap瓦片地址是HTTP协议，现代浏览器会拦截非安全的HTTP资源，导致瓦片无法加载。将TileLayer的url替换为HTTPS地址：

url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

2. 修复Leaflet默认Marker图标路径 #

React项目中Leaflet默认的Marker图标路径可能无法被正确解析，需要手动配置图标资源路径：
在组件开头导入Leaflet并添加配置：

import L from 'leaflet';

// 修复Marker图标路径
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

3. 验证容器高度的有效性 #

临时将MapContainer的style中的高度改为固定值（比如height: "500px"），确认是否是高度计算calc(100vh - 4rem)导致容器没有实际高度。如果固定高度能显示地图，再调试高度计算的逻辑。

修改后的完整代码示例 #

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

// 修复Marker图标路径
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

const ProjectAnalysis = () => {
  return (
    <div>
      <p>bok</p>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={true}
        style={{ width: "100%", height: "calc(100vh - 4rem)" }}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>{" "}
      <p>bok</p>
    </div>
  );
};

export default ProjectAnalysis;

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