Blazor 怎么调用浏览器 API (如地理位置)_技术教程

Blazor 通过 JavaScript 互操作（JS Interop）调用浏览器地理位置 API，需在 JS 中封装 navigator.geolocation.getCurrentPosition 并在 C# 中通过 IJSRuntime 调用，注意 HTTPS 安全上下文、用户授权及异常处理。

Blazor 可以调用浏览器 API（比如地理位置、通知、存储、摄像头等），但必须通过 JavaScript 互操作（JS Interop）来实现，因为这些 API 运行在浏览器上下文中，而 Blazor WebAssembly 或 Server 的 .NET 代码本身无法直接访问。

使用 JS Interop 调用地理位置 API

核心思路是：在 JS 中封装 navigator.geolocation.getCurrentPosition，再从 C# 调用它，并用 Promise + 回调或 async/await 处理结果。

在 wwwroot/index.html（WASM）或 Pages/_Host.cshtml（Server）的或底部添加一段轻量 JS 函数：

window.getGeoLocation = () => {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error("Geolocation is not supported"));
      return;
    }
    navigator.geolocation.getCurrentPosition(
      pos => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
      err => reject(new Error(err.message))
    );
  });
};

在 Blazor 组件（如 .razor 文件）中注入 IJSRuntime，然后调用：

@inject IJSRuntime JSRuntime
@code {
private string status = "点击获取位置...";
private async Task GetLocationAsync()
{
try
{
status = "定位中...";
var location = await JSRuntime.InvokeAsync("getGeoLocation");
status = $"纬度：{location.Lat}，经度：{location.Lng}";
}
catch (Exception ex)
{
status = $"失败：{ex.Message}";
}
}
}
// 定义匹配 JS 返回结构的类
public class LocationResult
{
public double Lat { get; set; }
public double Lng { get; set; }
}

注意权限与安全限制

现代浏览器要求地理位置 API 必须在安全上下文（https:// 或 localhost）中调用。HTTP 站点会静默拒绝请求。

开发时用 dotnet watch 启动默认就是 https://localhost:5001，没问题
部署到非 HTTPS 域名（如 http://myapp.com）将直接报错或不触发提示
用户第一次调用会弹出浏览器原生授权框，需手动允许；拒绝后需用户到地址栏手动重置权限

进阶：监听位置变化（watchPosition）

如果需要持续跟踪（比如地图应用），可封装 navigator.geolocation.watchPosition，并配合 .NET 事件或回调委托传递更新：

JS 侧保存 watchId，暴露 startWatching 和 stopWatching 方法
C# 用 DotNetObjectReference.Create(this) 传入回调对象，JS 触发 positionCallback.invokeMethodAsync
注意及时调用 clearWatch 避免内存泄漏和后台耗电