如何基于google_maps_flutter实现罗盘与移动联动的Google Map相机更新

1. 添加必要依赖 #

在pubspec.yaml中引入所需包：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^latest_version
  geolocator: ^latest_version

2. 配置系统权限 #

Android（AndroidManifest.xml） #

<!-- 位置权限 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 罗盘传感器权限（可选） -->
<uses-feature android:name="android.hardware.sensor.compass" android:required="false" />

iOS（Info.plist） #

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取您的位置以同步地图显示</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>需要获取您的位置以同步地图显示</string>

3. 核心代码实现 #

初始化变量 #

late GoogleMapController _mapController;
Position? _currentPosition;
double _compassHeading = 0.0;
bool _isFollowing = true; // 控制是否自动跟随设备

权限请求与实时监听 #

@override
void initState() {
  super.initState();
  _requestLocationPermission();
  _startLocationUpdates();
  _startCompassUpdates();
}

// 请求位置权限
Future<void> _requestLocationPermission() async {
  final permissionStatus = await Geolocator.checkPermission();
  if (permissionStatus == LocationPermission.denied) {
    await Geolocator.requestPermission();
  }
}

// 监听设备位置更新
void _startLocationUpdates() {
  Geolocator.getPositionStream(
    locationSettings: const LocationSettings(
      accuracy: LocationAccuracy.high,
      distanceFilter: 1, // 移动1米触发更新
    ),
  ).listen((Position position) {
    setState(() => _currentPosition = position);
    if (_isFollowing) _updateCamera();
  });
}

// 监听罗盘方向更新
void _startCompassUpdates() {
  Geolocator.getHeadingStream().listen((double heading) {
    setState(() => _compassHeading = heading);
    if (_isFollowing) _updateCamera();
  });
}

// 更新地图相机参数
void _updateCamera() {
  if (_currentPosition == null) return;
  
  final cameraPosition = CameraPosition(
    target: LatLng(_currentPosition!.latitude, _currentPosition!.longitude),
    zoom: 18.0,
    bearing: _compassHeading, // 绑定罗盘方向控制地图旋转
    tilt: 60.0, // 模拟谷歌地图的倾斜视角
  );
  
  _mapController.animateCamera(CameraUpdate.newCameraPosition(cameraPosition));
}

修改GoogleMap组件 #

GoogleMap(
  mapType: MapType.hybrid,
  initialCameraPosition: _kGooglePlex,
  myLocationEnabled: true, // 显示当前位置蓝点
  myLocationButtonEnabled: true, // 显示定位按钮
  compassEnabled: true, // 显示罗盘控件
  onMapCreated: (GoogleMapController controller) => _mapController = controller,
  onCameraMoveStarted: () {
    // 用户手动操作地图时，关闭自动跟随
    setState(() => _isFollowing = false);
  },
)

添加恢复跟随按钮 #

FloatingActionButton(
  onPressed: () {
    setState(() => _isFollowing = true);
    _updateCamera();
  },
  child: const Icon(Icons.my_location),
)

关键说明 #

• 位置监听通过distanceFilter控制更新频率，避免不必要的资源消耗
• 罗盘方向直接映射到CameraPosition.bearing，实现地图随设备朝向旋转
• 用户手动拖动地图时自动关闭跟随，点击定位按钮可恢复自动同步

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