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
篇幅有限,余下步骤参考: 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);
}
}
模拟追踪定位
chrome/edge F12进入调试模式后,点击右上角的 三个点的标志, 选择更多工具, 传感器, 定位
选择一个地理位置,组件定位追踪开启后,可以慢慢调节参数测试组件功能. :->
Blazor Bootstrap 组件库文档
写在最后
希望大佬们看到这篇文章,能给项目点个star支持下,感谢各位!
star流程:
1、访问点击项目链接:BootstrapBlazor
https://gitee.com/LongbowEnterprise/BootstrapBlazor
2、点击star,如下图,即可完成star,关注项目不迷路:
另外还有两个GVP项目,大佬们方便的话也点下star呗,非常感谢:
BootstrapAdmin 项目地址:
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 项目地址:
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群(QQ)欢迎加群讨论
BA & Blazor ①(795206915) BA & Blazor ②(675147445)
关联项目
FreeSql QQ群:4336577
BA & Blazor QQ群:795206915
Maui Blazor 中文社区 QQ群:645660665
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
转载声明
本文来自博客园,作者:周创琳 AlexChow,转载请注明原文链接:https://www.cnblogs.com/densen2014/p/16147326.html
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub