
Geolocation
Obtain location information through browser API.
Demo
Click the button to get your coordinates.
@page "/geolocations"
<h3>Geolocation</h3>
<DemoBlock Title="Basic usage" Introduction="Obtain location information through browser API." Name="Normal">
<p>Click the button to get your coordinates.</p>
<Tips>
<p>Note: For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.</p>
</Tips>
@if (WatchID == 0)
{
<Button Text="Get Location" OnClick="GetLocation"></Button>
<Button Text="Watch Position" OnClick="WatchPosition"></Button>
}
else
{
<Button Text="Stop Watch Position" 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="Longitude" />
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.Latitude" ShowLabel="true" DisplayText="Latitude" />
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.Accuracy" ShowLabel="true" DisplayText="Accuracy" />
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.Altitude" ShowLabel="true" DisplayText="Altitude" />
</div>
<div class="col-12 col-sm-4">
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.AltitudeAccuracy" ShowLabel="true" DisplayText="AltitudeAccuracy" />
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.Heading" ShowLabel="true" DisplayText="Heading" />
</div>
<div class="col-12 col-sm-4">
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.Speed" ShowLabel="true" DisplayText="Speed" />
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.CurrentDistance" ShowLabel="true" DisplayText="CurrentDistance" />
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.TotalDistance" ShowLabel="true" DisplayText="TotalDistance" />
</div>
<div class="col-12 col-sm-4">
<Display Value="@Model.LastUpdateTime" ShowLabel="true" DisplayText="UpdateTime" />
</div>
</div>
}
<BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using Microsoft.JSInterop;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
/// Geolocation 地理定位/移动距离追踪
/// </summary>
public partial class Geolocations : IAsyncDisposable
{
private JSInterop<Geolocations>? Interop { get; set; }
[NotNull]
private BlockLogger? Trace { get; set; }
[Inject]
[NotNull]
private IStringLocalizer<Geolocations>? Localizer { get; set; }
[Inject]
[NotNull]
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<Geolocations>(JSRuntime);
var ret = await Geolocation.GetLocaltion(Interop, this, nameof(GetLocationCallback));
Trace.Log(ret ? Localizer["GetLocationResultSuccess"] : Localizer["GetLocationResultFailed"]);
}
private async Task WatchPosition()
{
try
{
Interop ??= new JSInterop<Geolocations>(JSRuntime);
WatchID = await Geolocation.WatchPosition(Interop, this, nameof(GetLocationCallback));
Trace.Log(WatchID != 0 ? Localizer["WatchPositionResultSuccess"] : Localizer["WatchPositionResultFailed"]);
Trace.Log($"WatchID : {WatchID}");
}
catch (Exception)
{
Trace.Log(Localizer["WatchPositionResultFailed"]);
}
}
private async Task ClearWatchPosition()
{
if (WatchID != 0)
{
Interop ??= new JSInterop<Geolocations>(JSRuntime);
var ret = await Geolocation.ClearWatchPosition(Interop, WatchID);
if (ret)
{
WatchID = 0;
}
Trace.Log(ret ? Localizer["ClearWatchPositionResultSuccess"] : Localizer["ClearWatchPositionResultFailed"]);
}
}
/// <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);
}
}