Blazor+OSM全屏地图空白问题求助（基于BlazorLeaflet NuGet包）

这个问题我之前也碰到过，核心原因在于CSS高度继承的层级问题，加上Blazor组件渲染时机和Leaflet地图的尺寸检测逻辑不匹配导致的。下面给你分步解决：

1. 修复CSS的高度继承链 #

当你设置height:100%时，所有父元素必须有明确的高度值，否则浏览器无法计算出容器的实际尺寸。你的MainLayout默认没有设置高度，导致#map的100%高度找不到参考基准。

先修改MainLayout.razor，确保布局容器占满全屏：

@inherits LayoutComponentBase
<div class="full-height-container">
    @Body
</div>

<style>
    .full-height-container {
        height: 100vh;
        width: 100vw;
        padding: 0;
        margin: 0;
    }
</style>

2. 调整Index.razor的代码与样式 #

然后更新你的地图页面，添加显式的尺寸触发逻辑：

@page "/"
@using BlazorLeaflet
@using BlazorLeaflet.Models
@inject IJSRuntime jsRuntime

<div id="map" style="width: 100%; height: 100%;">
    <LeafletMap Map="_map" />
</div>

<style>
    html, body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden; /* 避免出现不必要的滚动条 */
    }
</style>

@code {
    private Map _map;
    private LatLng _startAt = new LatLng(53.13344f, 23.15026f);

    protected override void OnInitialized()
    {
        _map = new Map(jsRuntime) { Center = _startAt, Zoom = 12.2f };
        _map.OnInitialized += async () =>
        {
            await _map.AddLayerAsync(new TileLayer
            {
                UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                Attribution = "&copy; OpenStreetMap contributors",
            });
        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 强制Leaflet重新计算容器尺寸
            await _map.InvalidateSizeAsync(false);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

关键原因解释 #

• CSS层级问题：html、body、MainLayout容器、#map必须形成完整的高度继承链，每个层级都要有明确的高度值，100%高度才能生效。
• Leaflet尺寸检测：Blazor组件渲染完成时，Leaflet可能还没检测到容器的实际尺寸，调用InvalidateSizeAsync可以强制地图重新计算布局，从而正常渲染出地图。

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