如何获取Geo位置Blazor Server

Question

我目前正在基于.NET 6的Blazor Server项目。需要将GEO位置进入应用程序。我已经尝试了几种方法，但它们不起作用。在那里有人知道吗？请帮我。

Answer 1

这显示了如何调用浏览器API以获取当前位置。

geolocationjsinterop.js（wwwroot \ scripts）

export function getCurrentPosition(dotNetHelper) {

    const options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };

    function success(pos) {

        const coord = {
            latitude: pos.coords.latitude,
            longitude: pos.coords.longitude,
            accuracy: pos.coords.accuracy
        };

        dotNetHelper.invokeMethodAsync('OnSuccessAsync', coord);
    }

    function error(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
    }

    navigator.geolocation.getCurrentPosition(success, error, options);
}

geolocation.razor

@using Microsoft.JSInterop
@implements IAsyncDisposable
<button @onclick=@GetLocationAsync>Get Location</button>

@if (geoCoordinates is not null)
{
    <div>
        Latitude : @geoCoordinates.Latitude <br />
        Longitude : @geoCoordinates.Longitude<br />
        Accuracy : @geoCoordinates.Accuracy
    </div>
}

@code {
    private readonly Lazy<Task<IJSObjectReference>> moduleTask = default!;
    private readonly DotNetObjectReference<GeoLocation> dotNetObjectReference;
    private GeoCoordinates? geoCoordinates = null;

    [Inject]
    private IJSRuntime jsRuntime { get; set; } = default!;

    public GeoLocation()
    {
        moduleTask = new(() => jsRuntime!.InvokeAsync<IJSObjectReference>(
            identifier: "import",
            args: "./_content/ChatClient.Core/scripts/geoLocationJsInterop.js")
        .AsTask());

        dotNetObjectReference = DotNetObjectReference.Create(this);
    }

    public async Task GetLocationAsync()
    {
        var module = await moduleTask.Value;
        await module.InvokeVoidAsync(identifier: "getCurrentPosition", dotNetObjectReference);
    }

    [JSInvokable]
    public async Task OnSuccessAsync(GeoCoordinates geoCoordinates)
    {
        this.geoCoordinates = geoCoordinates;
        await InvokeAsync(StateHasChanged);
    }

    public async ValueTask DisposeAsync()
    {
        if (moduleTask.IsValueCreated)
        {
            var module = await moduleTask.Value;
            await module.DisposeAsync();
        }
    }

    public class GeoCoordinates
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public double Accuracy { get; set; }
    }
}

注意：更改.js文件的路径以适合您的项目。在这种情况下，我引用了称为chatclient.core的RCL。

args：“ ./scripts/geolocationjsinterop.js” for root Project。

该组件在WASM或Blazor-Server上运行。

api docs