我希望可以选择在我的 blazor（服务器）应用程序上获取当前用户位置。我曾尝试使用两种解决方案 Darnton.Blazor.DeviceInterop 和 AspNetMonsters.Blazor.Geolocation。 对于第一个，我遇到了如何正确使用它的问题，第二个在 NuGet 安装后破坏了整个应用程序...... 我将不胜感激分享其他解决方案，越简单越好
【问题讨论】：
如果您安装了您提到的 Blazor Geolocation 包 (Darnton.Blazor.DeviceInterop)，您应该能够将 GeolocationService 与单线器一起使用：
CurrentPositionResult = await GeolocationService.GetCurrentPosition();
如果你想了解里面发生了什么，我已经写得更详细了：
https://darnton.co.nz/2020/11/29/geolocation-in-blazor/
https://darnton.co.nz/2020/11/30/geolocation-ii-position-updates/
【讨论】：
您可以在使用 JS 互操作时使用 @Bertramp 建议。仅通过 JS 函数对其进行扩展，该函数应为互操作调用返回一个值。这个方法会是这样的：
const getCoords = async () => {
const pos = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
return [pos.coords.longitude, pos.coords.latitude];
};
【讨论】：
您可以使用 JS 互操作从 Blazor 组件调用 JS 函数，然后使用 navigtor.geolocation API。当您调用地理定位 API 时，您的浏览器会自动请求权限
@page "/call-js-example-1"
@inject IJSRuntime JS
<button @onclick="GetLocation">Get location</button>
@code {
private async Task<(long,long)> GetLocation()
{
ValueTuple<long,long>location = await JS.InvokeAsync<(long longitude, long lattitude)>("getLocation");
return location;
}
}
将<script>标签中的函数添加到Pages/_Host.cshtml
<script>
window.getLocation= () => {
if(navigator.geoLocation) {
// Do something with the navigator.geolocation.getCurrentPosition function
}
};
</script>
【讨论】：
最后我将这样的脚本添加到 _Host.cshtml
<script>
window.getCoords = async () => {
const pos = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
document.getElementById("SearchPoint").value = pos.coords.latitude + ', ' + pos.coords.longitude
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.getElementById("SearchPoint").dispatchEvent(evt);
}
else
document.getElementById("SearchPoint").fireEvent("onchange");
};
</script>
以及从 blazor 组件调用它的代码：
private void GetLocation()
{
JS.InvokeAsync<(long longitude, long lattitude)>("getCoords");
}
【讨论】：
我花了很长时间才弄明白，但我想分享一个解决方案来帮助其他陷入困境的人。此解决方案适用于 Blazor 服务器应用。
首先将您的脚本添加到 _Layout.cshtml 文件的正文中。它看起来像这样。
<body>
@RenderBody()
<script>
window.getCoords = async () => {
const pos = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
return [pos.coords.longitude, pos.coords.latitude];
};
<script>
</body>
接下来，您需要将 OnAfterRenderAsync 方法添加到您的类中。此方法将调用 _Layout.cshtml 中的 JavaScript 函数
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var result = await JS.InvokeAsync<JsonArray>("getCoords");
}
结果变量现在应该包含经度和纬度。
请注意，我期望的返回类型是 JsonArray。希望这会有所帮助。
【讨论】：