MAUI WebView加载地图：如何使用navigator.geolocation.getCurrentPosition获取位置？

一、配置位置权限 #

首先在Android项目中声明位置权限，修改Platforms/Android/AndroidManifest.xml，添加以下权限：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 需后台定位时添加 -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

二、MAUI WebView核心配置 #

需启用JavaScript支持，并针对Android平台配置地理定位权限回调：

1. XAML布局定义WebView #

<WebView x:Name="MapWebView" 
         Source="https://your-map-page-url" 
         HeightRequest="MatchParent" 
         WidthRequest="MatchParent" />

2. 后台代码配置（C#） #

在页面构造函数或OnAppearing方法中添加配置：

using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;

// 启用JavaScript支持
MapWebView.JavaScriptEnabled = true;

// Android平台专属配置
#if ANDROID
var androidWebView = MapWebView.Handler.PlatformView as Android.Webkit.WebView;
androidWebView.Settings.GeolocationEnabled = true;
androidWebView.Settings.JavaScriptEnabled = true;

// 处理地理定位权限请求
Android.Webkit.GeolocationPermissions.Invoke(androidWebView.Context, new Android.Webkit.GeolocationPermissions.ICallback()
{
    OnAllow = (origin) => Android.Webkit.GeolocationPermissions.Allow(origin),
    OnDeny = (origin) => Android.Webkit.GeolocationPermissions.Deny(origin)
});
#endif

3. 动态请求位置权限 #

运行时需主动申请权限，否则无法获取位置：

var status = await Permissions.CheckStatusAsync<Permissions.LocationWhenInUse>();
if (status != PermissionStatus.Granted)
{
    status = await Permissions.RequestAsync<Permissions.LocationWhenInUse>();
}

if (status == PermissionStatus.Granted)
{
    MapWebView.Source = "https://your-map-page-url";
}

三、Android/Kotlin原生端对应实现（逻辑完全一致） #

原生Android用Kotlin开发时，核心逻辑和MAUI Android端配置相同：

val webView = findViewById<WebView>(R.id.map_webview)
webView.settings.javaScriptEnabled = true
webView.settings.geolocationEnabled = true

// 处理地理定位权限回调
GeolocationPermissions.invoke(applicationContext, object : GeolocationPermissions.Callback {
    override fun onAllow(origin: String?) {
        GeolocationPermissions.allow(origin)
    }

    override fun onDeny(origin: String?) {
        GeolocationPermissions.deny(origin)
    }
})

// 动态申请权限
if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION)
    != PackageManager.PERMISSION_GRANTED) {
    ActivityCompat.requestPermissions(
        this,
        arrayOf(Manifest.permission.ACCESS_FINE_LOCATION),
        1001 // 自定义权限请求码
    )
}

四、Web端JavaScript代码示例 #

在加载的网页中调用定位API：

function getCurrentLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                console.log(`当前坐标：${latitude}, ${longitude}`);
                // 此处对接地图定位逻辑
            },
            (error) => {
                console.error(`定位失败：${error.message}`);
            },
            {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            }
        );
    } else {
        alert("当前环境不支持地理定位");
    }
}

window.onload = getCurrentLocation;

内容的提问来源于stack exchange，提问作者machao986