Blazor Server应用获取当前用户地理位置的可行解决方案咨询

核心逻辑直接调用浏览器原生Geolocation API，配合Blazor自带的JS互操作能力实现，完全不需要引入第三方NuGet包，避免依赖冲突问题。

1. 注入JS调用方法 #

将以下代码添加到项目入口文件的<script>标签中：

• .NET 6及更早版本：Pages/_Host.cshtml
• .NET 7及更高版本：Components/App.razor

window.getGeolocation = async (dotNetRef) => {
    if (!navigator.geolocation) {
        await dotNetRef.invokeMethodAsync('OnGetLocationError', '当前浏览器不支持地理位置功能');
        return;
    }
    navigator.geolocation.getCurrentPosition(
        async (position) => {
            const location = {
                Latitude: position.coords.latitude,
                Longitude: position.coords.longitude,
                Accuracy: position.coords.accuracy
            };
            await dotNetRef.invokeMethodAsync('OnGetLocationSuccess', location);
        },
        async (error) => {
            await dotNetRef.invokeMethodAsync('OnGetLocationError', `获取失败: ${error.message}`);
        }
    );
};

2. 定义地理位置接收模型 #

新建C#类用于接收JS回传的位置数据：

public class UserLocation
{
    /// <summary>
    /// 纬度
    /// </summary>
    public double Latitude { get; set; }
    /// <summary>
    /// 经度
    /// </summary>
    public double Longitude { get; set; }
    /// <summary>
    /// 精度（单位：米）
    /// </summary>
    public double Accuracy { get; set; }
}

3. 组件中调用实现功能 #

在需要获取地理位置的组件中添加如下代码即可直接使用：

@page "/location-demo"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<h3>地理位置获取演示</h3>

@if (Location != null)
{
    <p>纬度：@Location.Latitude</p>
    <p>经度：@Location.Longitude</p>
    <p>定位精度：@Location.Accuracy 米</p>
}
@if (!string.IsNullOrEmpty(ErrorMsg))
{
    <p style="color:red">错误信息：@ErrorMsg</p>
}

<button @onclick="TriggerGetLocation">获取当前设备位置</button>

@code {
    private UserLocation? Location { get; set; }
    private string? ErrorMsg { get; set; }
    private DotNetObjectReference<LocationDemo>? _dotNetRef;

    protected override void OnInitialized()
    {
        _dotNetRef = DotNetObjectReference.Create(this);
    }

    private async Task TriggerGetLocation()
    {
        ErrorMsg = string.Empty;
        await JSRuntime.InvokeVoidAsync("getGeolocation", _dotNetRef);
    }

    [JSInvokable]
    public void OnGetLocationSuccess(UserLocation location)
    {
        Location = location;
        StateHasChanged();
    }

    [JSInvokable]
    public void OnGetLocationError(string errorMsg)
    {
        ErrorMsg = errorMsg;
        StateHasChanged();
    }

    public async ValueTask DisposeAsync()
    {
        if (_dotNetRef != null)
        {
            await _dotNetRef.DisposeAsync();
        }
    }
}

注意事项 #

• 地理位置功能需要用户手动授权，仅HTTPS环境下可用（本地localhost调试不受限制）
• 无需引入任何第三方依赖，完全基于Blazor原生能力实现，不会出现依赖冲突导致项目崩溃的问题
• 可根据业务需求扩展JS代码，比如添加持续监听位置变化、设置定位超时时间、调整精度要求等功能

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