Blazor 怎么调用浏览器 API (如地理位置)

来源：这里教程网时间：2026-02-21 17:36:18 作者：

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
<p>@code {
private string status = "点击获取位置...";
private async Task GetLocationAsync()
{
try
{
status = "定位中...";
var location = await JSRuntime.InvokeAsync<LocationResult>("getGeoLocation");
status = $"纬度：{location.Lat}，经度：{location.Lng}";
}
catch (Exception ex)
{
status = $"失败：{ex.Message}";
}
}
}</p><p>// 定义匹配 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
避免内存泄漏和后台耗电

替代方案：用现成 NuGet 包（可选）

社区有封装好的库简化流程，例如 Blazored.Geolocation：

安装：
dotnet add package Blazored.Geolocation
注册服务：
services.AddBlazoredGeolocation();
组件中注入
IGeolocationService
，直接 await
GetCurrentPositionAsync()
底层仍是 JS Interop，但帮你处理了 Promise、错误映射和类型转换

基本上就这些。关键不是“能不能”，而是“怎么安全、可靠、可维护地桥接”。写好 JS 封装 + 做好异常和权限兜底，就能稳稳用上浏览器能力。