.NET MAUI Blazor组件集成Google Maps遇问题及报错咨询

问题原因分析 #

1. 第一次尝试失败：Blazor组件不支持直接内嵌<script>标签，组件内的脚本不会被浏览器执行，必须将脚本放置在wwwroot/index.html或独立的JS文件中。
2. 第二次尝试失败：OnInitializedAsync生命周期阶段，组件的DOM还未渲染完成，document.getElementById("map")返回null，导致地图初始化时抛出元素不存在的异常。

具体解决方案步骤 #

1. 配置脚本与HTML容器

• 修改wwwroot/index.html：将Google Maps脚本和初始化函数移至<body>末尾，移除callback参数（避免脚本加载完成后自动执行，此时DOM未准备好）：

<!-- 在index.html的<body>最后添加 -->
<script>
let map;

// 接收Blazor传递的DOM元素作为参数
function initMap(mapElement) {
    map = new google.maps.Map(mapElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&v=weekly" defer></script>

• 修改Map.razor：保留地图容器，使用Blazor的ElementReference获取DOM元素（比通过ID查找更可靠）：

@page "/map"
@inject IJSRuntime JS

<h3>Map</h3>
<!-- 必须设置明确的宽高，否则地图无法显示 -->
<div @ref="mapElement" style="width: 100%; height: 600px;"></div>

@code {
    private ElementReference mapElement;
    private bool isMapInitialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 仅在第一次渲染完成后初始化地图，避免重复执行
        if (firstRender && !isMapInitialized)
        {
            try
            {
                await JS.InvokeVoidAsync("initMap", mapElement);
                isMapInitialized = true;
            }
            catch (Exception ex)
            {
                Console.WriteLine($"地图初始化失败: {ex.Message}");
            }
        }
    }
}

2. 关键注意事项

• 给地图容器设置明确的宽高：默认div高度为0，会导致地图渲染后不可见。
• 确保Google Maps API密钥有效：已启用Maps JavaScript API，并配置了正确的访问权限（如允许本地调试或MA应用的访问）。
• 避免自动触发初始化：移除Google Maps脚本中的callback=initMap参数，由Blazor在DOM就绪后手动调用初始化函数。
• 使用ElementReference：避免通过ID查找DOM元素的潜在冲突（如组件复用场景下ID重复），直接传递组件级别的元素引用更可靠。

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