在 Blazor 中调用 Geolocation API 需通过 JS Interop：JavaScript 封装 navigator.geolocation 为 Promise 函数 getLocation，C# 使用 IJSRuntime.InvokeAsync 调用并匹配字段名，同时处理权限拒绝等错误场景。
在 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("getLocation") 获取结构化数据
注意：需提前定义接收数据的 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 返回 lat），可用 [JsonPropertyName("lat")] 标记（需引用 System.Text.Json）。
处理权限与错误场景
用户可能拒绝定位权限，或设备无 GPS。应在 UI 中给出明确反馈：
用 @if (isLoading) {
正在获取位置...
} 显示加载状态捕获 JSException 并检查消息是否含 “denied”、”unavailable” 等关键词提示用户手动开启浏览器定位权限（可附简短说明：地址栏左侧图标 → 允许）
不要假设调用一定成功——Geolocation API 是用户授权型 API，首次调用必然触发浏览器弹窗。
基本上就这些。关键点就三个：JS 侧封装好 Promise 化调用、C# 侧用 InvokeAsync 接收、前后字段名严格对齐。不复杂但容易忽略大小写和权限流程。
以上就是Blazor JS Interop 调用 Geolocation API 教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1442882.html
微信扫一扫 
支付宝扫一扫 
