Flutter实现谷歌地图相机朝向跟随用户后方（类Waze）

要实现类似Waze或谷歌地图的后方跟随式导航相机效果，核心是利用CameraPosition的bearing（相机朝向）和tilt（俯视角度）参数，结合用户的实时航向角动态调整相机状态。以下是具体实现步骤：

1. 获取用户实时航向角 #

首先需要通过位置服务获取用户的移动航向（heading），这是相机跟随朝向的核心数据。可以使用geolocator包实现：

import 'package:geolocator/geolocator.dart';
import 'dart:math';

// 先请求位置权限
await Geolocator.requestPermission();

// 监听位置与航向的实时更新
StreamSubscription<Position> positionStream = Geolocator.getPositionStream(
  locationSettings: const LocationSettings(
    accuracy: LocationAccuracy.high, // 高精度模式
    distanceFilter: 1, // 移动1米触发更新
  ),
).listen((Position position) {
  // 获取用户当前航向角（范围0-360度）
  double? userHeading = position.heading;
  if (userHeading != null) {
    updateMapCamera(position, userHeading);
  }
});

2. 配置相机参数实现跟随效果 #

修改你现有的相机更新代码，添加bearing和tilt参数，还可以调整目标位置让用户处于画面更合理的区域：

void updateMapCamera(Position userPosition, double userHeading) {
  // 可选：计算用户后方偏移位置，让用户图标处于画面中间（比如偏移5米）
  const offsetDistance = 5.0; // 偏移距离（米）
  final radianHeading = userHeading * pi / 180; // 角度转弧度
  final offsetLat = userPosition.latitude - 
      (offsetDistance * sin(radianHeading)) / 111320; // 纬度偏移计算
  final offsetLng = userPosition.longitude - 
      (offsetDistance * cos(radianHeading)) / (111320 * cos(userPosition.latitude * pi / 180)); // 经度偏移计算

  mapController.moveCamera(CameraUpdate.newCameraPosition(CameraPosition(
    target: LatLng(offsetLat, offsetLng), // 偏移后的目标位置
    zoom: 18,
    bearing: userHeading, // 相机朝向与用户航向一致
    tilt: 60, // 俯视角度，模拟后方跟随视角（可调整50-70之间）
  )));
}

关键参数说明 #

• bearing: 设置为用户的航向角，确保相机始终朝向用户前进方向，实现"跟随转向"效果。
• tilt: 设置50-70度的俯视角度，模拟从用户后方斜向下看的视角，符合导航场景视觉习惯。
• 目标位置偏移: 可选操作，将相机目标点设置在用户后方一小段距离，让用户图标处于画面中间偏下，前方道路完全展示，更贴近主流导航App体验。

注意事项 #

• 部分设备可能无法提供航向数据，务必对userHeading做判空处理，避免报错。
• 若需要更平滑的过渡效果，可替换moveCamera为animateCamera，并设置动画时长：

  mapController.animateCamera(
    CameraUpdate.newCameraPosition(...),
    duration: const Duration(milliseconds: 300),
  );
  

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