如何为Flutter Web配置位置权限？

我正在跟随一个教程开发天气应用，该应用通过geolocator和geocoding包获取用户当前位置并显示对应地区的天气。教程仅覆盖了Android和iOS端的配置，未提供Flutter Web浏览器端的配置说明。

已完成的移动端配置：

• 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" /> 
  

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

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>This app needs access to location when open.</string> 
  

已安装的依赖：

flutter pub add http
flutter pub add geolocator
flutter pub add geocoding
flutter pub add lottie

核心业务代码片段：

import 'dart:convert';

import 'package:geocoding/geocoding.dart';
import 'package:geolocator/geolocator.dart';
import 'package:weather_app/models/weather_model.dart';
import 'package:http/http.dart' as http;

class WeatherService {
  static const BASE_URL = 'http://api.openweathermap.org/data/2.5/weather';
  final String apiKey;

  WeatherService(this.apiKey);

  Future<Weather> getWeather(String cityName) async {
    final response = await http
        .get(Uri.parse('$BASE_URL?q=$cityName&appid=$apiKey&units=metric'));

    if (response.statusCode == 200) {
      return Weather.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to load weather data');
    }
  }

  Future<String> getCurrentCity() async {
    // 获取位置权限
    LocationPermission permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
    }

    // 获取当前位置
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);

    // 转换为地址信息
    List<Placemark> placemarks =
        await placemarkFromCoordinates(position.latitude, position.longitude);
    // 提取城市名称
    String? city = placemarks[0].locality;
    return city ?? "";
  }
}

请问如何正确配置Flutter Web端的位置权限？

1. 配置web/index.html文件 #

在项目根目录下的web/index.html的<head>标签内，添加以下内容：

• 位置权限说明（用于浏览器权限弹窗的提示文本）：

  <meta name="geolocator-permission" content="本应用需要获取您的位置信息以显示当地天气。" />
  

• 引入Google Maps Geocoding API脚本（geocoding包在Web端依赖此API，需替换为你的Google Maps API密钥）：

  <script src="https://maps.googleapis.com/maps/api/js?key=你的GoogleMapsAPI密钥&libraries=places"></script>
  

2. 浏览器环境要求 #

• 本地测试：使用flutter run -d chrome启动项目时，localhost环境不受HTTPS限制，可以正常请求位置权限。
• 线上部署：必须使用HTTPS协议，现代浏览器会阻止非HTTPS环境下的位置API请求。

3. 权限逻辑适配 #

• geolocator包的checkPermission()和requestPermission()方法在Web端会自动调用浏览器原生的位置权限弹窗。
• 如果用户拒绝权限，浏览器不会再自动弹出请求，需要在代码中处理LocationPermission.deniedForever的情况，提示用户手动在浏览器设置中开启位置权限。

4. 代码微调（可选） #

可以在getCurrentCity()方法中添加权限永久拒绝的处理逻辑：

Future<String> getCurrentCity() async {
  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
  }

  // 处理永久拒绝的情况
  if (permission == LocationPermission.deniedForever) {
    throw Exception("位置权限已被永久拒绝，请在浏览器设置中开启");
  }

  // 后续位置获取逻辑不变
  Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
  List<Placemark> placemarks = await placemarkFromCoordinates(position.latitude, position.longitude);
  String? city = placemarks[0].locality;
  return city ?? "";
}

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