OnClick 在 Blazor WASM 中显示/隐藏谷歌地图 div 元素答案

【问题标题】：OnClick show/hide google maps div element in Blazor WASMOnClick 在 Blazor WASM 中显示/隐藏谷歌地图 div 元素
【发布时间】：2021-10-29 06:29:49
【问题描述】：

我想在按钮单击操作时显示/隐藏地图。我试图通过设置一个布尔变量来实现这一点，我在点击操作中设置/重置并在剃须刀页面中检查它，如下例所示：

        [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 之前调用了初始化函数，但我不知道如何解决这个问题。请帮忙！

【问题讨论】：

欢迎来到 Stack Overflow。请阅读asking questions。代码图像不可搜索，无法被解决问题的人复制，也无法访问。请edit 用它包含的文本替换或扩充图像的问题。
@JasonAller 谢谢！我已经解决了这个问题。
@Ion，您只需要从 OnAfterRender{Async} 对实例化您的对象（Google 地图）一次，在当前组件已初始化且其所有子组件均已渲染之后.然后，您可以根据 displayMap 变量的值显示或隐藏 Google 地图。请参阅此处 (stackoverflow.com/a/64572906/6152891)，我如何做同样的事情，但使用 Leaflet 地图。校长是一样的。同样，您必须仅在呈现当前组件后实例化您的 JS 对象
这取决于您要如何管理地图状态。如果地图不经常显示，您可以节省初始化成本。
地图使用频率如何？

标签： google-maps blazor blazor-webassembly

【解决方案1】：

当您想在显示/隐藏之间保持地图状态时，而不是

@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(...) 行。

【讨论】：

这就是解决方案。我认为使用 if 语句与 hide 相同。这是我的错误。非常感谢您的回答！
这其实是非常重要的理解。条件逻辑实际根本不渲染元素。您的组件可能有 2000 行，但客户端可能只有 4 或 5 行。