Flutter Google Map启动时将用户当前位置设为屏幕中心

问题背景 #

我正在开发Flutter应用并集成Google Map，已通过Center组件在屏幕中间放置图标，且使用getMarkerPosition()函数获取屏幕中心的位置信息，当前功能正常。需求为：应用启动时，屏幕中心的图标需初始定位在用户当前位置，即用户当前位置与屏幕中心重合。

解决方案 #

核心思路是：在地图初始化完成后，获取用户当前位置，将地图相机移动到该位置，使屏幕中心图标与用户位置重合。具体步骤如下：

• 确保能正确获取用户当前位置的经纬度（需配置位置权限及定位功能）
• 在地图onMapCreated回调中，获取到用户位置后，调用相机移动方法将地图中心定位到用户位置
• 保持屏幕中心的图标固定在Stack的Center位置（当前布局已满足此条件）

修改后的关键代码 #

1. 完善用户位置获取函数（示例） #

假设使用geolocator包实现定位，补充/修改locateUserPosition()函数：

LatLng? userCurrentLocation;

Future<void> locateUserPosition() async {
  // 检查并请求位置权限
  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      // 处理权限拒绝逻辑
      return;
    }
  }

  // 获取高精度当前位置
  Position position = await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high,
  );
  userCurrentLocation = LatLng(position.latitude, position.longitude);
}

2. 修改地图onMapCreated回调 #

在地图初始化完成后，先获取用户位置，再移动相机到用户位置：

onMapCreated: (GoogleMapController controller) {
  _controller.complete(controller);
  googleMapController = controller;

  // 先获取用户位置，再移动地图相机
  locateUserPosition().then((_) {
    if (userCurrentLocation != null) {
      googleMapController!.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(
            target: userCurrentLocation!,
            zoom: 15.0, // 根据需求调整初始缩放级别
          ),
        ),
      );
    }
    setState(() {
      bottomPaddding = 120;
    });
  });
},

3. 原getMarkerPosition()函数保持不变 #

该函数用于后续地图移动后获取屏幕中心位置，无需修改：

Future<void> getMarkerPosition() async {
  double screenWidth = MediaQuery.of(context).size.width *
      MediaQuery.of(context).devicePixelRatio;
  double screenHeight = MediaQuery.of(context).size.height *
      MediaQuery.of(context).devicePixelRatio;

  double middleX = screenWidth / 2;
  double middleY = screenHeight / 2;

  ScreenCoordinate screenCoordinate = ScreenCoordinate(x: middleX.round(), y: middleY.round());

  LatLng middlePoint = await googleMapController!.getLatLng(screenCoordinate);
}

原理说明 #

屏幕中心的图标通过Stack的Center组件固定在屏幕中间，当地图相机移动到用户当前位置时，地图上的用户位置坐标会与屏幕中心重合，从而实现需求中的效果。

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