Blazor WASM 中的 OnClick show/hide google 映射 div 元素

Question

我想 show/hide 地图上的按钮单击操作。我试图通过设置一个 bool 变量来实现这一点，我在点击操作中 set/reset 并在剃须刀页面中检查它，如下例所示：

        [Inject]
        public IJSRuntime JSRuntime { get; set; }

        protected bool displayMap = false;

        protected async Task OpenMap()
        {
            displayMap = !displayMap;
            if (displayMap)
            {
                await JSRuntime.InvokeVoidAsync("initialize", null);
            }
        }

            @if (displayMap)
            { 
                <MudCard>
                    <MudCardContent>
                        <div id="map" style="height:500px;width:100%;">
                        </div>
                    </MudCardContent>
                </MudCard>
            }

但这个解决方案似乎行不通，因为我收到渲染错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常呈现组件：地图：应为 Element 类型的 mapDiv，但被传递为 null。错误

似乎在 div 渲染之前调用了初始化函数，但我不知道如何解决这个问题。请帮忙！

Answer 1

当您想在 show/hide 之间保持地图状态时，而不是

@if (displayMap)
{ 
    <MudCard>
        <MudCardContent>
            <div id="map" style="height:500px;width:100%;">
            </div>
        </MudCardContent>
    </MudCard>
}

您可以使用

<MudCard hidden="@(!displayMap)">
    <MudCardContent>
        <div id="map" style="height:500px;width:100%;">
        </div>
    </MudCardContent>
</MudCard>

结合

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("initialize", null);
    }
}

并从按钮点击中删除 await JSRuntime.InvokeVoidAsync(...) 行。

Blazor WASM 中的 OnClick show/hide google 映射 div 元素

OnClick show/hide google maps div element in Blazor WASM

google-maps

blazor

blazor-webassembly