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

地理位置/移动距离跟踪组件

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

演示

提示

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

例子

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

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

示例索引.razor

地理定位/移动距离追踪

单击按钮以获取地理位置坐标。

@if (WatchID == 0) { } else { } @if (Model != null) {

图片[1]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

}

图片[2]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

@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));

图片[3]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

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 ? "停止追踪成功" : "停止追踪失败"; } } ///

图片[4]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

/// ///
/// [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; } } } ///

图片[5]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

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

模拟跟踪定位

/edge F12进入调试模式后,点击右上角三点图标,选择更多工具、传感器、定位

选择一个地理位置,开启组件定位跟踪后,可以慢慢调整参数测试组件功能。 :->

图片[6]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

图片[7]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

图片[8]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

图片[9]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

组件库文档

写在最后

希望大佬们看到这篇文章,给项目一个star支持下,谢谢!

星级流程:

1、访问并点击项目链接:

图片[10]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

2、@ >点击star,如下图即可完成star,关注项目不迷路:

还有另外两个 GVP 项目。

项目地址:

图片[11]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

项目地址:

图片[12]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

交流群(QQ)欢迎加群讨论

BA & ①() BA & ②()

图片[13]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

图片[14]-Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍-唐朝资源网

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片