如何解决Blazor应用中Google Maps JavaScript API的“未使用async加载”控制台警告？

我来帮你搞定这个头疼的警告问题！你遇到的情况其实是因为Google Maps API的检测逻辑比较严格——哪怕你在静态脚本标签里加了async和defer，Blazor的渲染机制可能还是让脚本加载的时机不符合它的最佳实践判定标准。咱们用动态加载脚本的方式就能彻底解决这个问题，具体步骤如下：

第一步：移除静态脚本标签 #

先把你在App.razor里加的那个Google Maps脚本标签删掉，不要同时用静态和动态加载，避免冲突和重复加载的问题。

第二步：编写动态加载API的JS函数 #

在你的全局JS文件（比如wwwroot/js/interop.js）里添加一个专门加载Google Maps API的异步函数，确保加载逻辑完全符合要求：

async function loadGoogleMapsApi(apiKey) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
        script.async = true;
        script.defer = true;
        script.onload = () => resolve(window.google);
        script.onerror = () => reject(new Error('Google Maps API加载失败'));
        document.head.appendChild(script);
    });
}

第三步：修改你的Autocomplete初始化函数 #

把原来的initializeGoogleMapsAutocomplete改成先等待API加载完成，再初始化自动补全功能，确保不会提前调用未加载的API：

window.initializeGoogleMapsAutocomplete = async (autocompleteElement, dotNetRef, apiKey) => {
    try {
        // 先确保API加载完成
        await loadGoogleMapsApi(apiKey);
        
        // 初始化城市自动补全
        const autocomplete = new google.maps.places.Autocomplete(autocompleteElement, {
            types: ['(cities)']
        });

        autocomplete.addListener('place_changed', function () {
            const place = autocomplete.getPlace();
            let city = "";
            let state = "";

            if (place.address_components) {
                for (const component of place.address_components) {
                    const types = component.types;

                    // 提取城市名称
                    if (types.indexOf("locality") !== -1) {
                        city = component.long_name;
                    }
                    // 提取州/省的简称
                    if (types.indexOf("administrative_area_level_1") !== -1) {
                        state = component.short_name;
                    }
                }
            }

            // 回调Blazor组件的方法传递数据
            dotNetRef.invokeMethodAsync("SetCityState", city, state);
        });
    } catch (err) {
        console.error('初始化Google Maps自动补全失败:', err);
    }
};

第四步：在Blazor组件中正确调用interop函数 #

在需要使用自动补全的Blazor组件里，选择合适的生命周期（比如OnAfterRenderAsync，确保DOM元素已经渲染完成）来调用这个JS函数，同时传入API密钥：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<input @ref="autocompleteInput" type="text" placeholder="输入城市名称..." />

@code {
    private ElementReference autocompleteInput;
    private DotNetObjectReference<YourComponentName>? _dotNetRef;
    // 替换成你的API密钥
    private const string _googleMapsApiKey = "YOUR_API_KEY";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _dotNetRef = DotNetObjectReference.Create(this);
            await JSRuntime.InvokeVoidAsync(
                "initializeGoogleMapsAutocomplete",
                autocompleteInput,
                _dotNetRef,
                _googleMapsApiKey);
        }
    }

    [JSInvokable]
    public async Task SetCityState(string city, string state)
    {
        // 这里处理从JS传递过来的城市和州数据
        // 比如更新组件状态、调用后端接口等
    }

    public async ValueTask DisposeAsync()
    {
        _dotNetRef?.Dispose();
    }
}

为什么这样能解决警告？ #

动态加载脚本的方式完全由JavaScript控制异步加载流程，Google Maps API的检测逻辑能够正确识别到async属性的设置，符合它的最佳实践要求。同时，我们通过Promise确保了只有API加载完成后才初始化自动补全功能，还能避免脚本未加载完成就调用的潜在错误。

备注：内容来源于stack exchange，提问作者RandomUsername