我在 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 地图实例以防止图标在控件上重复吗?任何见解或建议将不胜感激!
预先感谢您的帮助!
采取的步骤
您仅在窗口卸载时清理地图,这是当用户导航出您的网络应用程序(或关闭窗口)时发生的事件...因此,当您离开
/map
时,您不会调用卸载方法页至/someOther
页。
您可以实现
IDisposable
并在那里调用 clean 方法..
@implements IDisposable
...
@code {
...
public void Dispose()
{
await _jsRuntime.InvokeVoidAsync("cleanupMap");
}