如何在Flutter WebView中显示位置权限弹窗？

• 配置原生平台权限

  • Android：在android/app/src/main/AndroidManifest.xml中添加位置权限声明：

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    

    同时在WebView的Android配置中启用地理定位：

    WebView(
      initialUrl: '你的自定义链接',
      javascriptMode: JavaScriptMode.unrestricted,
      creationParams: const WebViewCreationParams(
        androidSpecificSettings: AndroidSpecificSettings(
          geolocationEnabled: true,
        ),
      ),
      // 其他配置...
    )
    

  • iOS：在ios/Runner/Info.plist中添加权限描述：

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>需要获取位置信息以提供相关服务</string>
    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
    <string>需要获取位置信息以提供相关服务</string>
    

• 处理WebView的权限请求回调
  必须实现onGeolocationPermissionsShowPrompt回调来授权地理定位权限，否则弹窗不会触发：

  WebView(
    // 其他配置...
    onGeolocationPermissionsShowPrompt: (String origin, GeolocationPermissionsShowPromptResponse response) {
      response.grant(true); // 允许当前源的地理定位请求
      return Future.value();
    },
  )
  

• 排查网页加载异常

  • 确认initialUrl包含完整协议（如https://），避免使用相对路径或无协议链接。
  • 启用WebView调试：
    • Android：在main.dart初始化时添加WebView.debuggingEnabled(true);，然后通过Chrome的chrome://inspect查看网页控制台错误。
    • iOS：在Xcode中开启Web Inspector，通过Safari开发者工具查看网页日志，排查CORS、资源加载失败等问题。
  • 先在手机浏览器中打开目标链接，确认网页本身能正常加载并触发位置权限弹窗，排除网页自身逻辑问题。

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