Flutter如何实现高德地图轨迹运动

在Flutter中如何使用高德地图SDK实现运动轨迹功能？我已经集成了高德地图插件，能够正常显示地图，但不知道如何绘制连续的运动轨迹线并实现平滑的动画效果。具体需要：1. 如何将GPS坐标点连成轨迹线；2. 如何让图标沿轨迹运动；3. 运动过程中如何保持合适的缩放级别。官方文档中没有找到完整的示例代码，求实现方案或思路。

2 回复

使用Flutter实现高德地图轨迹运动，需集成amap_flutter_map插件。通过Polyline绘制轨迹，结合AnimationController控制坐标点动画，实现平滑移动效果。

更多关于Flutter如何实现高德地图轨迹运动的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现高德地图轨迹运动，可以通过高德官方提供的amap_flutter_map插件配合动画控制器实现。以下是核心实现步骤和代码示例：

1. 添加依赖

dependencies:
  amap_flutter_map: ^x.x.x # 使用最新版本

2. 实现代码

import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:flutter/material.dart';

class MovingMarkerPage extends StatefulWidget {
  @override
  _MovingMarkerPageState createState() => _MovingMarkerPageState();
}

class _MovingMarkerPageState extends State<MovingMarkerPage>
    with SingleTickerProviderStateMixin {
  late AMapController _mapController;
  late AnimationController _controller;
  List<LatLng> _trackPoints = [
    LatLng(39.90960, 116.397228),
    LatLng(39.90920, 116.397628),
    LatLng(39.90880, 116.398028),
    // 添加更多轨迹点...
  ];
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 10), // 动画时长
    )..addListener(_updateMarkerPosition);
  }

  void _updateMarkerPosition() {
    final double value = _controller.value;
    final int index = (value * (_trackPoints.length - 1)).floor();
    final double t = value * (_trackPoints.length - 1) - index;
    
    if (index < _trackPoints.length - 1) {
      final LatLng start = _trackPoints[index];
      final LatLng end = _trackPoints[index + 1];
      
      final double lat = start.latitude + (end.latitude - start.latitude) * t;
      final double lng = start.longitude + (end.longitude - start.longitude) * t;
      
      _mapController.updateMarker(MarkerOptions(
        position: LatLng(lat, lng),
        // 可更新其他标记属性
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        onMapCreated: (controller) {
          _mapController = controller;
          // 初始添加标记
          _mapController.addMarker(MarkerOptions(
            position: _trackPoints.first,
          ));
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _controller.forward(),
        child: Icon(Icons.play_arrow),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

3. 关键说明

  1. 轨迹数据：准备包含经纬度的轨迹点列表
  2. 动画控制：使用AnimationController控制运动进度
  3. 插值计算：通过线性插值计算中间位置，实现平滑移动
  4. 标记更新：使用updateMarker方法实时更新标记位置

4. 优化建议

  • 使用CurvedAnimation实现非线性运动效果
  • 添加方向旋转（通过计算两点间角度）
  • 使用自定义标记图标
  • 添加轨迹线（Polyline）

记得在Android/iOS项目中配置高德地图SDK密钥。这种方法可以实现流畅的轨迹运动效果，适合车辆跟踪、运动轨迹等场景。

回到顶部