Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍

地理定位/移动距离追踪组件

通过浏览器 API 获取定位信息

DEMO https://www.blazor.zone/geolocations

小提示

注意: 出于安全考虑，当网页请求获取用户位置信息时，用户会被提示进行授权。注意不同浏览器在请求权限时有不同的策略和方式。Windows10 在未开启定位的情况下无法获取位置。

示例

dotnet new blazorserver -o b07geo
dotnet add b07geo package BootstrapBlazor
dotnet add b07geo package BootstrapBlazor.FontAwesome
dotnet sln add b07geo/b07geo.csproj

篇幅有限,余下步骤参考:

例 Index.razor

地理定位/移动距离追踪


    单击按钮以获取地理位置坐标。
    @if (WatchID == 0)
    {
        
        
    }
    else
    {
        
    }
    @if (Model != null)
    {
        
            
                
            
            
                
            
            
                
            
            
                
            
            
            
            
                
            
            
                
            
            
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    }

    @Trace

cs文件, 例 Index.razor.cs

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using Microsoft.JSInterop;

namespace b07geo.Pages;

public partial class Index : IAsyncDisposable
{
    private JSInterop? Interop { get; set; }
    private string Trace;

    [Inject]
    private IJSRuntime? JSRuntime { get; set; }

    private GeolocationItem? Model { get; set; }

    /// 
    /// 获得/设置 获取持续定位监听器ID
    /// 
    private long WatchID { get; set; }

    private async Task GetLocation()
    {
        Interop ??= new JSInterop(JSRuntime);
        var ret = await Geolocation.GetLocaltion(Interop, this, nameof(GetLocationCallback));
        Trace += (ret ? "成功获取定位" : "获取定位失败");
    }
    private async Task WatchPosition()
    {
        try
        {
            Interop ??= new JSInterop(JSRuntime);
            WatchID = await Geolocation.WatchPosition(Interop, this, nameof(GetLocationCallback));
            Trace += WatchID != 0 ? "调用 WatchPosition 成功" : "调用 WatchPosition 失败";
            Trace += $"WatchID : {WatchID}";
        }
        catch (Exception)
        {
            Trace += "调用 WatchPosition 失败";
        }
    }

    private async Task ClearWatchPosition()
    {
        if (WatchID != 0)
        {
            Interop ??= new JSInterop(JSRuntime);
            var ret = await Geolocation.ClearWatchPosition(Interop, WatchID);
            if (ret)
            {
                WatchID = 0;
            }
            Trace += ret ? "停止追踪成功" : "停止追踪失败";
        }
    }

    /// 
    /// 
    /// 
    /// 
    [JSInvokable]
    public void GetLocationCallback(GeolocationItem item)
    {
        Model = item;
        StateHasChanged();
    }

    /// 
    /// 
    /// 
    /// 
    protected virtual async ValueTask DisposeAsync(bool disposing)
    {
        if (disposing)
        {
            if (Interop != null)
            {
                if (WatchID != 0)
                {
                    await Geolocation.ClearWatchPosition(Interop, WatchID);
                }

                Interop.Dispose();
                Interop = null;
            }
        }
    }

    /// 
    /// 
    /// 
    public async ValueTask DisposeAsync()
    {
        await DisposeAsync(true);
        GC.SuppressFinalize(this);
    }
}