Flutter InAppWebView地理定位异常：自定义HTTPS页面提示权限被拒

核心原因 #

自定义HTTPS页面的地理定位权限请求未被InAppWebView正确处理，而W3Schools作为可信第三方域名，InAppWebView默认允许其权限请求，自定义页面需手动配置权限拦截逻辑。

1. 补全Android权限配置 #

确保AndroidManifest.xml中添加完整的定位权限，适配不同Android版本：

<!-- 基础定位权限 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- Android 12+ 精确位置权限 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 若需后台定位，添加以下权限 -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

2. 配置InAppWebView权限拦截逻辑 #

在main.dart的InAppWebView中添加onPermissionRequest回调，手动允许定位权限：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的自定义HTTPS页面地址")),
  onPermissionRequest: (controller, request) async {
    // 判断是否为定位权限请求
    final isLocationPermission = request.resources.any((res) => 
      res == "android.permission.ACCESS_FINE_LOCATION" || 
      res == "android.permission.ACCESS_COARSE_LOCATION");
    
    if (isLocationPermission) {
      return PermissionResponse(
        resources: request.resources,
        action: PermissionResponseAction.GRANT,
      );
    }
    // 其他权限默认拒绝
    return PermissionResponse(
      resources: request.resources,
      action: PermissionResponseAction.DENY,
    );
  },
  // 其他配置项
)

3. 开启InAppWebView地理定位支持 #

在InAppWebViewSettings中明确开启地理定位：

InAppWebView(
  initialSettings: InAppWebViewSettings(
    geolocationEnabled: true,
    geolocationDatabasePath: "/data/data/你的应用包名/files/geolocation",
  ),
  // 其他配置项
)

4. 验证自定义页面代码细节 #

确认页面地理定位调用的错误逻辑准确，避免误判权限状态：

<button onclick="getLocation()">获取位置</button>
<p id="locationResult"></p>

<script>
const resultEl = document.getElementById("locationResult");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    resultEl.textContent = "浏览器不支持地理定位";
  }
}

function showPosition(position) {
  resultEl.innerHTML = `纬度: ${position.coords.latitude}<br>经度: ${position.coords.longitude}`;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      resultEl.textContent = "用户拒绝位置请求";
      break;
    case error.POSITION_UNAVAILABLE:
      resultEl.textContent = "位置信息不可用";
      break;
    case error.TIMEOUT:
      resultEl.textContent = "请求位置超时";
      break;
    case error.UNKNOWN_ERROR:
      resultEl.textContent = "发生未知错误";
      break;
  }
}
</script>

5. 清理应用缓存后测试 #

卸载应用重新安装，或在系统设置中清除应用缓存与存储，避免缓存的旧权限状态干扰测试。

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