页面导航后 Blazor .NET8 应用程序中的 Google 地图控件出现重复图标

问题描述 投票:0回答:1

Blazor .NET8 应用程序中 Google 地图按钮上的重复图标问题

我在 Blazor .NET8 应用程序中遇到一个反复出现的问题,每次我导航离开地图页面然后返回时,Google 地图上的按钮(例如缩放和全屏按钮)都会显示重复的图标。最初,当地图第一次加载时,一切看起来都很正常。但是,在访问应用程序的其他部分后返回地图时,地图控件上的图标会倍增。

期望的行为

我希望 Google 地图按钮上的图标在离开和返回地图页面时保持单一且不重复。

具体问题

每次导航回地图页面时,地图控件上的图标(缩放、全屏等)都会重复。

代码示例

这是我的代码的简化版本来说明问题:

@page "/map"

@* MapContainer.razor *@
<div id="map" style="height: 400px;"></div>

@code {
    private IJSRuntime _jsRuntime;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await _jsRuntime.InvokeVoidAsync("initializeMap");
        }
    }
}
@* JavaScript code *@
<script>
    let map;

    function initializeMap() {
        if (!map) {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -34.397, lng: 150.644 },
                zoom: 8
            });
        }
    }

    function cleanupMap() {
        if (map) {
            google.maps.event.clearInstanceListeners(map);
            map = null;
        }
    }

    window.addEventListener('beforeunload', cleanupMap);
</script>

请求帮助

有人可以建议为什么会发生这种情况以及如何解决此问题或正确清理或重置 Google 地图实例以防止图标在控件上重复吗?任何见解或建议将不胜感激!

预先感谢您的帮助!

采取的步骤

  1. 确保 Google Maps API 脚本仅加载一次。
  2. 在重新初始化地图之前使用 JavaScript 清理地图实例。
  3. 删除所有标记、事件侦听器,并将地图变量重置为 null。
google-maps blazor .net-8.0
1个回答
0
投票

您仅在窗口卸载时清理地图,这是当用户导航出您的网络应用程序(或关闭窗口)时发生的事件...因此,当您离开

/map
时,您不会调用卸载方法页至
/someOther
页。

您可以实现

IDisposable
并在那里调用 clean 方法..

@implements IDisposable

...

@code {
    ...

    public void Dispose()
    {
      await _jsRuntime.InvokeVoidAsync("cleanupMap");
    }
© www.soinside.com 2019 - 2024. All rights reserved.