Blazor Bootstrap 元件庫地理定位/移動距離追蹤元件介紹

AlexChow發表於2022-04-15

地理定位/移動距離追蹤元件

通過瀏覽器 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

篇幅有限,餘下步驟參考: 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 class="form-inline row g-3 mt-3">
            <div class="col-12 col-sm-4">
                <Display Value="@Model.Longitude" ShowLabel="true" DisplayText="經度" />
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.Latitude" ShowLabel="true" DisplayText="緯度" />
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.Accuracy" ShowLabel="true" DisplayText="位置精度" />
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.Altitude" ShowLabel="true" DisplayText="海拔" />
            </div>
            <div class="col-12 col-sm-4">
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.AltitudeAccuracy" ShowLabel="true" DisplayText="海拔精度" />
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.Heading" ShowLabel="true" DisplayText="方向" />
            </div>
            <div class="col-12 col-sm-4">
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.Speed" ShowLabel="true" DisplayText="速度" />
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.CurrentDistance" ShowLabel="true" DisplayText="移動距離" />
            </div>
            <div class="col-12 col-sm-4">
                <Display Value="@Model.TotalDistance" ShowLabel="true" DisplayText="總移動距離" />
            </div>
            <div class="col-12 col-sm-4">
                <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);
    }
}