Blazor JS Interop 调用 Geolocation API 教程

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

在 Blazor 应用中调用浏览器的 Geolocation API，需要通过 JS Interop 实现 JavaScript 与 C# 的双向通信。核心是用 JavaScript 获取位置，再把结果传回 .NET 方法——不能直接在 C# 中调用

navigator.geolocation

，因为它是纯前端 API。

准备 JavaScript 位置获取函数

在

wwwroot/js/site.js

（或任意已引入的 JS 文件）中添加以下函数：

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

这个函数返回 Promise，兼容 Blazor 的异步 JS Interop 调用。确保该 JS 文件已在

_Host.cshtml

或

index.html

中正确引用。

在 Blazor 组件中声明 JS Interop 引用

使用

IJSRuntime

注入并调用 JS 函数。推荐在组件中按需调用，而非全局初始化：

在 Razor 组件顶部注入服务：
@inject IJSRuntime JSRuntime
定义一个 C# 方法封装调用逻辑，例如：
private async Task GetLocationAsync()
用
await JSRuntime.InvokeAsync<locationdata>("getLocation")</locationdata>
获取结构化数据

注意：需提前定义接收数据的 C# 类（如

LocationData

），属性名必须与 JS 返回对象的 key 完全一致（区分大小写）。

定义匹配的 C# 数据模型

创建一个简单类用于反序列化 JS 返回值：

public class LocationData
{
    public double Latitude { get; set; }
    public double Longitude { get; set; }
    public double Accuracy { get; set; }
    public long Timestamp { get; set; }
}

Blazor 会自动将 JS 对象的字段映射到同名属性。如果字段名不一致（比如 JS 返回