Blazor .NET8应用Google Maps控件图标重复问题求助

问题核心在于Blazor组件生命周期与地图清理时机不匹配：

• 你绑定的beforeunload事件仅在浏览器刷新/关闭时触发，但Blazor是单页应用，页面导航只是组件的卸载与重建，不会触发该事件。
• 离开地图页面时，地图实例未被正确清理，而地图容器的DOM元素可能因Blazor渲染机制被保留/复用；再次返回时，即便你判断了!map，旧的控件DOM仍残留在容器中，新地图实例又会添加一套控件，最终导致重复显示。

1. 利用Blazor组件的Dispose机制触发清理 #

让地图组件实现IDisposable接口，在组件卸载时主动调用JS的清理方法，确保导航离开时立即清理地图资源：

@page "/map"
@implements IDisposable

<div id="map" style="height: 400px;"></div>

@code {
    [Inject]
    private IJSRuntime _jsRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await _jsRuntime.InvokeVoidAsync("initializeMap");
        }
    }

    public async ValueTask DisposeAsync()
    {
        await _jsRuntime.InvokeVoidAsync("cleanupMap");
    }
}

2. 完善JS的地图清理逻辑 #

除了销毁地图实例，还要清空容器DOM，彻底移除残留的控件元素，同时使用Google Maps官方推荐的销毁方式：

let map;

function initializeMap() {
    const mapContainer = document.getElementById('map');
    // 初始化前先清空容器，避免残留旧控件
    mapContainer.innerHTML = '';
    if (!map) {
        map = new google.maps.Map(mapContainer, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    }
}

function cleanupMap() {
    if (map) {
        // 清理地图所有事件监听器
        google.maps.event.clearInstanceListeners(map);
        // 官方推荐的销毁方式：移除地图关联的DOM与事件
        map.setMap(null);
        map = null;
    }
    // 清空容器DOM，确保下次初始化环境干净
    const mapContainer = document.getElementById('map');
    if (mapContainer) {
        mapContainer.innerHTML = '';
    }
}

3. 可选：保留beforeunload绑定（用于页面关闭/刷新场景） #

原有的window.addEventListener('beforeunload', cleanupMap)可以保留，用于处理浏览器刷新或关闭时的地图清理，但不是解决当前导航问题的必需项。

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