Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件
1. 运行截图
2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件
本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代桌面和移动端都支持.包括MAUI Blazor 😃
navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition
2.1 获取定位
其中持续定位watchPosition方法会通过wrapper.invokeMethodAsync('UpdateWatchID', id)返回监听器ID到c#存起来,移除的监听器和注销时候用到.
js代码
export function getLocation(wrapper, getPosition = true) {
console.log('start ' + (getPosition ? 'getLocation' : 'watchPosition'));
var currentDistance = 0.0;
var totalDistance = 0.0;
var lastLat;
var lastLong;
var status;
if (getPosition) getCurrentPosition(); else watchPosition();
Number.prototype.toRadians = function () {
return this * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
// R is the radius of the earth in kilometers
var R = 6371;
var deltaLatitude = (latitude2 - latitude1).toRadians();
var deltaLongitude = (longitude2 - longitude1).toRadians();
latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
var a = Math.sin(deltaLatitude / 2) *
Math.sin(deltaLatitude / 2) +
Math.cos(latitude1) *
Math.cos(latitude2) *
Math.sin(deltaLongitude / 2) *
Math.sin(deltaLongitude / 2);
var c = 2 * Math.atan2(Math.sqrt(a),
Math.sqrt(1 - a));
var d = R * c;
return d;
}
function updateStatus(message) {
status = message;
wrapper.invokeMethodAsync('UpdateStatus', message);
}
function watchPosition() {
if (navigator.geolocation) {
status = "HTML5 Geolocation is supported in your browser.";
updateStatus(status);
var id = navigator.geolocation.watchPosition(updateLocation,
handleLocationError,
{ maximumAge: 20000 });
wrapper.invokeMethodAsync('UpdateWatchID', id);
}
}
function getCurrentPosition() {
if (navigator.geolocation) {
updateStatus("HTML5 Geolocation is supported in your browser.");
navigator.geolocation.getCurrentPosition(updateLocation,
handleLocationError);
}
}
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
// sanity test... don't calculate distance if accuracy
// value too large
if (accuracy >= 500) {
updateStatus("Need more accurate values to calculate distance.");
}
// calculate distance
currentDistance = 0.0;
if ((lastLat != null) && (lastLong != null)) {
currentDistance = distance(latitude, longitude, lastLat, lastLong);
totalDistance += currentDistance;
}
lastLat = latitude;
lastLong = longitude;
updateStatus("Location successfully updated.");
console.log("updateLocation end");
var geolocationitem = {
"Status": status,
"Latitude": latitude,
"Longitude": longitude,
"Accuracy": accuracy,
"Timestamp": timestamp,
"CurrentDistance": currentDistance,
"TotalDistance": totalDistance,
"LastLat": lastLat,
"LastLong": lastLong,
};
wrapper.invokeMethodAsync('GetResult', geolocationitem);
}
function handleLocationError(error) {
switch (error.code) {
case 0:
updateStatus("There was an error while retrieving your location: " + error.message);
break;
case 1:
updateStatus("The user prevented this page from retrieving a location.");
break;
case 2:
updateStatus("The browser was unable to determine your location: " + error.message);
break;
case 3:
updateStatus("The browser timed out before retrieving the location.");
break;
}
}
}
2.2 组件页面点击停止持续定位,把监听器ID传入移除的监听器.
export function clearWatchLocation(wrapper,id) {
//扩展阅读:移除的监听器
//id = navigator.geolocation.watchPosition(success, error, options);
console.log('clearWatch ' + id);
navigator.geolocation.clearWatch(id);
wrapper.invokeMethodAsync('UpdateStatus', 'clearWatch ok');
}
3. 打开Components文件夹 , 新建Geolocation文件夹,新建三个文件
3.1 GeolocationItem.cs 定位数据类
cs代码
using System;
using System.ComponentModel;
namespace Blazor100.Components
{
/// <summary>
/// 定位数据类
/// </summary>
public class Geolocationitem
{
/// <summary>
/// 状态
/// </summary>
/// <returns></returns>
[DisplayName("状态")]
public string? Status { get; set; }
/// <summary>
/// 纬度
/// </summary>
/// <returns></returns>
[DisplayName("纬度")]
public decimal Latitude { get; set; }
/// <summary>
/// 经度
/// </summary>
/// <returns></returns>
[DisplayName("经度")]
public decimal Longitude { get; set; }
/// <summary>
/// 准确度(米)<para></para>
/// 将以m指定维度和经度值与实际位置的差距,置信度为95%.
/// </summary>
[DisplayName("准确度(米)")]
public decimal Accuracy { get; set; }
/// <summary>
/// 时间戳
/// </summary>
[DisplayName("时间戳")]
public long Timestamp { get; set; }
/// <summary>
/// 时间
/// </summary>
[DisplayName("时间")]
public DateTime LastUpdateTime { get => UnixTimeStampToDateTime(Timestamp); }
/// <summary>
/// 移动距离
/// </summary>
[DisplayName("移动距离")]
public decimal CurrentDistance { get; set; } = 0.0M;
/// <summary>
/// 总移动距离
/// </summary>
[DisplayName("总移动距离")]
public decimal TotalDistance { get; set; } = 0.0M;
/// <summary>
/// 最后一次获取到的纬度
/// </summary>
[DisplayName("最后一次获取到的纬度")]
public decimal LastLat { get; set; }
/// <summary>
/// 最后一次获取到的经度
/// </summary>
[DisplayName("最后一次获取到的经度")]
public decimal LastLong { get; set; }
/// <summary>
///
/// </summary>
/// <param name="unixTimeStamp"></param>
/// <returns></returns>
public static DateTime UnixTimeStampToDateTime(long unixTimeStamp)
{
// Unix timestamp is seconds past epoch
System.DateTime dtDateTime = new DateTime(1970, 1, 1, 0, 0, 0, 0, System.DateTimeKind.Utc);
dtDateTime = dtDateTime.AddMilliseconds(unixTimeStamp).ToLocalTime();
return dtDateTime;
}
}
}
3.1 Geolocation.razor 组件razor
@implements IAsyncDisposable
@namespace Blazor100.Components
<div @ref="GeolocationElement">
@if (ShowButtons)
{
if (WatchID == null)
{
<button class="btn btn-primary" type="button" onclick="@GetLocation">@GetLocationButtonText</button>
<button class="btn btn-primary" type="button" onclick="@WatchPosition">@WatchPositionButtonText</button>
}
else
{
<button class="btn btn-primary" type="button" onclick="@ClearWatch">@ClearWatchPositionButtonText</button>}
}
</div>
3.2 Geolocation.razor.cs 组件代码
cs代码
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.Diagnostics.CodeAnalysis;
namespace Blazor100.Components;
/// <summary>
/// Geolocation 组件基类
/// <para></para>
/// 扩展阅读:Chrome中模拟定位信息,清除定位信息<para></para>
/// https://blog.csdn.net/u010844189/article/details/81163438
/// </summary>
public partial class Geolocation
{
[Inject] IJSRuntime? JS { get; set; }
/// <summary>
/// 获得/设置 定位
/// </summary>
[Parameter]
[NotNull]
public string? GeolocationInfo { get; set; }
/// <summary>
/// 获得/设置 获取位置按钮文字 默认为 获取位置
/// </summary>
[Parameter]
[NotNull]
public string? GetLocationButtonText { get; set; } = "获取位置";
/// <summary>
/// 获得/设置 获取持续定位监听器ID
/// </summary>
[Parameter]
public long? WatchID { get; set; }
/// <summary>
/// 获得/设置 获取移动距离追踪按钮文字 默认为 移动距离追踪
/// </summary>
[Parameter]
[NotNull]
public string? WatchPositionButtonText { get; set; } = "移动距离追踪";
/// <summary>
/// 获得/设置 获取停止追踪按钮文字 默认为 停止追踪
/// </summary>
[Parameter]
[NotNull]
public string? ClearWatchPositionButtonText { get; set; } = "停止追踪";
/// <summary>
/// 获得/设置 是否显示默认按钮界面
/// </summary>
[Parameter]
public bool ShowButtons { get; set; } = true;
/// <summary>
///
/// </summary>
protected ElementReference GeolocationElement { get; set; }
/// <summary>
/// 获得/设置 定位结果回调方法
/// </summary>
[Parameter]
public Func<Geolocationitem, Task>? OnResult { get; set; }
/// <summary>
/// 获得/设置 状态更新回调方法
/// </summary>
[Parameter]
public Func<string, Task>? OnUpdateStatus { get; set; }
private IJSObjectReference? module;
private DotNetObjectReference<Geolocation>? InstanceGeo { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
try
{
if (firstRender)
{
module = await JS!.InvokeAsync<IJSObjectReference>("import", "./lib/geolocation/geolocation.js");
InstanceGeo = DotNetObjectReference.Create(this);
}
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
//await module.InvokeVoidAsync("destroy");
InstanceGeo!.Dispose();
await module.DisposeAsync();
}
}
/// <summary>
/// 获取定位
/// </summary>
public virtual async Task GetLocation()
{
try
{
await module!.InvokeVoidAsync("getLocation", InstanceGeo);
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
/// <summary>
/// 持续定位
/// </summary>
public virtual async Task WatchPosition()
{
try
{
await module!.InvokeVoidAsync("getLocation", InstanceGeo, false);
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
/// <summary>
/// 持续定位
/// </summary>
public virtual async Task ClearWatch()
{
await module!.InvokeVoidAsync("clearWatchLocation", InstanceGeo, WatchID);
WatchID = null;
}
/// <summary>
/// 定位完成回调方法
/// </summary>
/// <param name="geolocations"></param>
/// <returns></returns>
[JSInvokable]
public async Task GetResult(Geolocationitem geolocations)
{
try
{
if (OnResult != null) await OnResult.Invoke(geolocations);
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
/// <summary>
/// 获得/设置 错误回调方法
/// </summary>
[Parameter]
public Func<string, Task>? OnError { get; set; }
/// <summary>
/// 状态更新回调方法
/// </summary>
/// <param name="status"></param>
/// <returns></returns>
[JSInvokable]
public async Task UpdateStatus(string status)
{
if (OnUpdateStatus != null) await OnUpdateStatus.Invoke(status);
}
/// <summary>
/// 监听器ID回调方法
/// </summary>
/// <param name="watchID"></param>
/// <returns></returns>
[JSInvokable]
public Task UpdateWatchID(long watchID)
{
this.WatchID = watchID;
return Task.CompletedTask;
}
}
4. Pages文件夹添加GeolocationPage.razor文件,用于演示组件调用.
4.1 GeolocationPage.razor
razor代码
@page "/geolocations"
<h3>定位/持续定位 Geolocation</h3>
<p>@message</p>
<Blazor100.Components.Geolocation OnResult="@OnResult" OnUpdateStatus="@OnUpdateStatus" OnError="@OnError" />
<p>@status</p>
<div class="table-container">
<div class="table-toolbar">
</div>
<div class="table-wrapper">
<table class="table is-single table-demo">
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th><div class="table-cell"><span class="table-text">纬度</span></div></th>
<th><div class="table-cell"><span class="table-text">经度</span></div></th>
<th><div class="table-cell"><span class="table-text">准确度(米)</span></div></th>
<th><div class="table-cell"><span class="table-text">时间戳</span></div></th>
<th><div class="table-cell"><span class="table-text">时间</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="table-cell">@geolocations?.Latitude</div></td>
<td><div class="table-cell">@geolocations?.Longitude</div></td>
<td><div class="table-cell">@geolocations?.Accuracy</div></td>
<td><div class="table-cell">@geolocations?.Timestamp</div></td>
<td><div class="table-cell">@geolocations?.LastUpdateTime</div></td>
</tr>
</tbody>
<thead>
<tr>
<th><div class="table-cell"><span class="table-text">移动距离</span></div></th>
<th><div class="table-cell"><span class="table-text">总移动距离</span></div></th>
<th><div class="table-cell"><span class="table-text">最后一次获取到的纬度</span></div></th>
<th><div class="table-cell"><span class="table-text">最后一次获取到的经度</span></div></th>
<th><div class="table-cell"><span class="table-text">状态</span></div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="table-cell">@geolocations?.CurrentDistance</div></td>
<td><div class="table-cell">@geolocations?.TotalDistance</div></td>
<td><div class="table-cell">@geolocations?.LastLat</div></td>
<td><div class="table-cell">@geolocations?.LastLong</div></td>
<td><div class="table-cell">@geolocations?.Status</div></td>
</tr>
</tbody>
</table>
</div>
</div>
4.2 GeolocationPage.razor.cs
using Blazor100.Components;
namespace Blazor100.Pages;
/// <summary>
/// Geolocation 地理定位/移动距离追踪
/// <para></para>
/// 扩展阅读:Chrome中模拟定位信息,清除定位信息<para></para>
/// https://blog.csdn.net/u010844189/article/details/81163438
/// </summary>
public sealed partial class GeolocationPage
{
private string? status { get; set; }
private Geolocationitem? geolocations { get; set; }
private string message;
private Task OnResult(Geolocationitem geolocations)
{
this.geolocations = geolocations;
StateHasChanged();
return Task.CompletedTask;
}
private Task OnUpdateStatus(string status)
{
this.status = status;
StateHasChanged();
return Task.CompletedTask;
}
private Task OnError(string message)
{
this.message = message;
StateHasChanged();
return Task.CompletedTask;
}
}
5. _Imports.razor加入一行引用组件的命名空间.
@using Blazor100.Components
6. 首页引用组件演示页 <GeolocationPage />
或者 Shared/NavMenu.razor
添加导航
<div class="nav-item px-3">
<NavLink class="nav-link" href="geolocations">
定位
</NavLink>
</div>
7. F5运行程序
至此,使用JS隔离制作定位/持续定位组件大功告成! Happy coding!
Blazor组件自做系列
Blazor组件自做一 : 使用JS隔离封装viewerjs库
Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做三 : 使用JS隔离封装ZXing扫码
Blazor组件自做四: 使用JS隔离封装signature_pad签名组件
Blazor组件自做五: 使用JS隔离封装Google地图
Blazor组件自做六: 使用JS隔离封装Baidu地图
Blazor组件自做七: 使用JS隔离制作定位/持续定位组件
Blazor组件自做八: 使用JS隔离封装屏幕键盘kioskboard.js组件<03-27>
项目源码 Github | Gitee
关联项目
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/16028238.html
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub