Flutter应用WebView内HTML5 Geolocation权限弹窗不弹出问题

webview_flutter默认没有实现地理位置请求的桥接逻辑，既不会自动向系统申请定位权限，也不会将网页端发起的navigator.geolocation请求转发给系统定位服务，因此不会弹出权限申请弹窗，自然无法拿到位置信息。你的JS代码本身在普通浏览器可正常运行，不需要修改，只需要完成以下三层配置即可正常使用定位、加载地图。

第一步：配置原生平台的定位权限声明 #

Android端配置 #

打开项目路径android/app/src/main/AndroidManifest.xml，在<manifest>节点下、<application>节点外添加权限声明：

<!-- 基础定位权限 -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- Android 12及以上版本需要额外添加后台定位权限，仅前台使用定位时可以不加 -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

如果你的页面是HTTP协议而非HTTPS，需要在<application>节点添加属性android:usesCleartextTraffic="true"，否则非安全上下文的定位请求会被系统直接拦截。

iOS端配置 #

打开项目路径ios/Runner/Info.plist，在<dict>节点内添加权限描述：

<key>NSLocationWhenInUseUsageDescription</key>
<string>获取位置信息用于展示当前定位</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>获取位置信息用于展示当前定位</string>

第二步：添加运行时动态权限申请 #

Android 6.0以上、iOS系统都需要在运行时动态申请定位权限，不能只靠清单文件静态声明。

• 在pubspec.yaml中添加权限处理依赖：

dependencies:
  permission_handler: ^11.0.0 # 选用当前最新版本即可

• 编写权限申请方法，在定位请求触发前调用：

Future<bool> requestLocationPerm() async {
  final status = await Permission.locationWhenInUse.request();
  return status.isGranted;
}

第三步：配置WebView定位回调桥接 #

你当前使用的旧版WebView组件没有暴露定位回调接口，建议升级到webview_flutter 3.0及以上版本，通过WebViewController配置定位处理逻辑，完整初始化代码如下：

class _WebViewStackState extends State<WebViewStack> {
  late final WebViewController webController;

  @override
  void initState() {
    super.initState();
    webController = WebViewController()
      // 开启JS执行权限
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // 开启DOM存储，加载地图类页面必须配置
      ..enableDomStorage(true)
      // 核心：配置定位权限请求回调
      ..setGeolocationPermissionsPrompt((origin, callback) async {
        final permGranted = await requestLocationPerm();
        // 参数1：是否允许定位，参数2：是否持久化授权
        callback(permGranted, permGranted);
      })
      // 可选：打印JS端日志，方便调试
      ..setOnConsoleMessage((msg) {
        debugPrint('JS Console: ${msg.message}');
      })
      // 替换成你实际的页面HTTPS地址，不要用example.com占位测试
      ..loadRequest(Uri.parse('https://你的实际页面地址'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: webController),
    );
  }
}

常见踩坑点 #

• 必须使用HTTPS协议加载需要定位的页面，Android和iOS的WebView默认会拦截HTTP非安全上下文的定位请求，哪怕权限配置正确也不会触发
• 不要用example.com这类不存在的域名测试，必须将你的JS页面部署到实际域名下，本地调试可以搭建本地HTTPS服务
• 如果加载的是第三方地图页面，除了定位权限，还要确保WebView没有拦截页面的弹框、新窗口跳转请求，否则地图交互可能异常

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