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

博客动态

 0  234

羽尘 2022-04-15 08:57:59

悬赏：0 积分收藏

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

地理定位/移动距离追踪组件通过浏览器 API 获取定位信息

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

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

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

小提示

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

示例

dotnet new blazorserver -o b07geodotnet add b07geo package BootstrapBlazordotnet add b07geo package BootstrapBlazor.FontAwesomedotnet sln add b07geo/b07geo.csproj

篇幅有限,余下步骤参考: https://www.cnblogs.com/densen2014/p/16147322.html

例 Index.razor

<h3>地理定位/移动距离追踪</h3><div>    <p>单击按钮以获取地理位置坐标。</p>    @if (WatchID == 0)    {        <Button Text="获取位置" OnClick="GetLocation"></Button>        <Button Text="移动距离追踪" OnClick="WatchPosition"></Button>    }    else    {        <Button Text="停止追踪" OnClick="ClearWatchPosition"></Button>    }    @if (Model != null)    {        <div >            <div >                <Display Value="@Model.Longitude" ShowLabel="true" DisplayText="经度" />            </div>            <div >                <Display Value="@Model.Latitude" ShowLabel="true" DisplayText="纬度" />            </div>            <div >                <Display Value="@Model.Accuracy" ShowLabel="true" DisplayText="位置精度" />            </div>            <div >                <Display Value="@Model.Altitude" ShowLabel="true" DisplayText="海拔" />            </div>            <div >            </div>            <div >                <Display Value="@Model.AltitudeAccuracy" ShowLabel="true" DisplayText="海拔精度" />            </div>            <div >                <Display Value="@Model.Heading" ShowLabel="true" DisplayText="方向" />            </div>            <div >            </div>            <div >                <Display Value="@Model.Speed" ShowLabel="true" DisplayText="速度" />            </div>            <div >                <Display Value="@Model.CurrentDistance" ShowLabel="true" DisplayText="移动距离" />            </div>            <div >                <Display Value="@Model.TotalDistance" ShowLabel="true" DisplayText="总移动距离" />            </div>            <div >                <Display Value="@Model.LastUpdateTime" ShowLabel="true" DisplayText="时间戳" />            </div>        </div>    }    @Trace</div>

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<Index>? Interop { get; set; }    private string Trace;    [Inject]    private IJSRuntime? JSRuntime { get; set; }    private GeolocationItem? Model { get; set; }    /// <summary>    /// 获得/设置 获取持续定位监听器ID    /// </summary>    private long WatchID { get; set; }    private async Task GetLocation()    {        Interop ??= new JSInterop<Index>(JSRuntime);        var ret = await Geolocation.GetLocaltion(Interop, this, nameof(GetLocationCallback));        Trace += (ret ? "成功获取定位" : "获取定位失败");    }    private async Task WatchPosition()    {        try        {            Interop ??= new JSInterop<Index>(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<Index>(JSRuntime);            var ret = await Geolocation.ClearWatchPosition(Interop, WatchID);            if (ret)            {                WatchID = 0;            }            Trace += ret ? "停止追踪成功" : "停止追踪失败";        }    }    /// <summary>    ///     /// </summary>    /// <param name="item"></param>    [JSInvokable]    public void GetLocationCallback(GeolocationItem item)    {        Model = item;        StateHasChanged();    }    /// <summary>    ///     /// </summary>    /// <param name="disposing"></param>    protected virtual async ValueTask DisposeAsync(bool disposing)    {        if (disposing)        {            if (Interop != null)            {                if (WatchID != 0)                {                    await Geolocation.ClearWatchPosition(Interop, WatchID);                }                Interop.Dispose();                Interop = null;            }        }    }    /// <summary>    ///     /// </summary>    public async ValueTask DisposeAsync()    {        await DisposeAsync(true);        GC.SuppressFinalize(this);    }}