如何基于当前GPS位置向目的地显示导航箭头？

安全阿岳

2026-8-18

实现基于Geolocator的导航箭头功能

核心逻辑

要做出类似GPS Arrow Navigator的持续指向箭头，核心是结合设备航向与目标方位角，实时调整箭头的旋转角度，让它始终指向目的地，不受用户转向影响。

具体实现步骤

实时获取关键数据：用geolocator库同时监听两个数据流
- 当前位置经纬度：通过getPositionStream持续获取
- 设备航向（正北为基准的朝向角度）：通过getHeadingStream获取（需设备支持方向传感器）

计算目标方位角：根据当前位置和目的地的经纬度，算出从当前点指向目标点的方位角（正北为0度，顺时针递增），实现代码如下：

import 'dart:math';

double calculateBearing(LatLng current, LatLng destination) {
  final lat1 = current.latitude * pi / 180;
  final lon1 = current.longitude * pi / 180;
  final lat2 = destination.latitude * pi / 180;
  final lon2 = destination.longitude * pi / 180;

  final dLon = lon2 - lon1;
  final y = sin(dLon) * cos(lat2);
  final x = cos(lat1) * sin(lat2) - sin(lat1) * cos(lat2) * cos(dLon);
  var bearing = atan2(y, x) * 180 / pi;
  return (bearing + 360) % 360; // 修正为0-360度范围
}

计算箭头旋转角度：用目标方位角减去设备当前航向，取模360得到箭头需要旋转的角度：
```
final arrowRotation = (targetBearing - deviceHeading) % 360;
```
绘制动态箭头：用Flutter的Transform.rotate组件包裹箭头图标，将计算出的角度转为弧度后传入angle参数，每次数据更新时刷新UI：
```
Transform.rotate(
  angle: arrowRotation * pi / 180,
  child: const Icon(Icons.navigation, size: 60, color: Colors.redAccent),
)
```