flutter 高德地图渲染行走轨迹

1. 安装地图插件

permission_handler: ^5.0.1+1
amap_map_fluttify: ^0.30.1
flutter_screenutil: 4.0.2+3
flutter_easyloading: ^2.2.2

2. 渲染关键代码

 // 添加线段
 //lines 结构   [LatLng(26.642386, 106.65195799999998), LatLng(26.641542, 106.65062999999998), LatLng(26.641402, 106.65063499999997), LatLng(26.641411, 106.65086300000002), LatLng(26.641334, 106.65067099999999), LatLng(26.641374, 106.650688), LatLng(26.641567, 106.65078499999998), LatLng(26.641656, 106.651207), LatLng(26.641708, 106.651408), LatLng(26.641413, 106.65066100000001), LatLng(26.641484, 106.65012100000001)]
 //定义
 AMapController _mapController;
 Map mapMakerListMap = <dynamic, Marker>{};
Map mapPolylineListMap = <dynamic, Polyline>{};
 // 添加线段
  void addLines(List<LatLng> lines) async {
    var polyline = Polyline(
      color: Colors.deepOrange,
      width: 6,
      geodesic: true,
      points: lines,
      capType: CapType.butt,
      joinType: JoinType.bevel,
      customTexture: BitmapDescriptor.fromIconPath('assets/map/line.png'), //线段
    );

    mapPolylineListMap[polyline.id] = polyline;

    // 设置起始点
    if (lines.length >= 2) {
      LatLng startC = lines.first;
      LatLng endC = lines.last;

      var ms = Marker(
        position: startC,
        icon: BitmapDescriptor.fromIconPath('assets/map/start.png'), //起点
        zIndex: 2,
      );
      var me = Marker(
        position: endC,
        icon: BitmapDescriptor.fromIconPath('assets/map/end.png'), //终点
        zIndex: 2,
      );

      mapMakerListMap['_start_'] = ms;
      mapMakerListMap['_end_'] = me;
    } else {
      LatLng startC = lines.first;
      LatLng endC = lines.first;

      var ms = Marker(
        position: startC,
        icon: BitmapDescriptor.fromIconPath('assets/map/start.png'),
        zIndex: 2,
      );
      var me = Marker(
        position: endC,
        icon: BitmapDescriptor.fromIconPath('assets/map/end.png'),
        zIndex: 2,
      );

      mapMakerListMap['_start_'] = ms;
      mapMakerListMap['_end_'] = me;
    }

    setState(() => null);
  }

3. 效果图
   
   4、组件整体代码

library ui_official_amap;

import 'dart:convert';

import 'package:flutter/material.dart';

import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:permission_handler/permission_handler.dart';

import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:amap_flutter_base/amap_flutter_base.dart';


const AMAP_KEYS = AMapApiKey(
  androidKey: "xxxxxxxxxxxx",
  iosKey: "xxxxxxxxxxxxxxxx",
);

class comMap extends StatefulWidget {
  const comMap({
    Key key,
    this.center,
    this.trackList = const [],
    this.pointList = const [],
    this.zoom = 14.0,
  }) : super(key: key);

  final List trackList;
  final List<LatLng> pointList;

  final LatLng center;
  final double zoom;

  @override
  _UIMapState createState() => _UIMapState();
}

GlobalKey<_UIMapState> theMapKey = GlobalKey();

class _UIMapState extends State<comMap> {
  // use state
  AMapController _mapController;

  Map mapMakerListMap = <dynamic, Marker>{};
  Map mapPolylineListMap = <dynamic, Polyline>{};

  final List<LatLng> _traackPath = [];

  // 设置轨迹路径
  setPath() {
    if (widget.trackList.isNotEmpty) {
      for (var item in widget.trackList) {
        if (item is Map<String, dynamic>) {
          LatLng latLng = LatLng.fromJson(item);
          if (latLng != null) {
            _traackPath.add(latLng);
          }
        }
        if (item is List && item.length == 2) {
          LatLng latLng = LatLng(item[0], item[1]);
          _traackPath.add(latLng);
        }
      }
    }
    mapClean();
  }

  // 刷新后的设置
  void initOrRefresh() async {
    if (widget.center is LatLng) {
      _mapController.moveCamera(
        CameraUpdate.newLatLngZoom(
          widget.center,
          widget.zoom,
        ),
        animated: true,
      );
    }
    // ignore: unnecessary_type_check
    if (widget.pointList is List<LatLng>) {
      // addPoints(widget.pointList);
    }

    if (_traackPath.isNotEmpty) {
      // 添加(轨迹)线段
      addLines(_traackPath);
    }
  }

  @override
  void initState() {
    super.initState();
    setPath();
  }

  @override
  void didUpdateWidget(comMap oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (_mapController != null) {
      setPath();
      initOrRefresh();
    }
  }

  // 添加点
  void addPoints(List<LatLng> marks) async {
    for (var i = 0; i < marks.length; i++) {
      var marker = Marker(
        position: marks[i],
        icon: BitmapDescriptor.defaultMarker,
        zIndex: 1,
        infoWindowEnable: false,
      );
      mapMakerListMap[marker.id] = marker;
    }
    setState(() => null);
  }

  

  // 添加线段
  void addLines(List<LatLng> lines) async {
    var polyline = Polyline(
      color: Colors.deepOrange,
      width: 6,
      geodesic: true,
      points: lines,
      capType: CapType.butt,
      joinType: JoinType.bevel,
      customTexture: BitmapDescriptor.fromIconPath('assets/map/line.png'),
    );

    mapPolylineListMap[polyline.id] = polyline;

    // 设置起始点
    if (lines.length >= 2) {
      LatLng startC = lines.first;
      LatLng endC = lines.last;

      var ms = Marker(
        position: startC,
        icon: BitmapDescriptor.fromIconPath('assets/map/start.png'),
        zIndex: 2,
      );
      var me = Marker(
        position: endC,
        icon: BitmapDescriptor.fromIconPath('assets/map/end.png'),
        zIndex: 2,
      );

      mapMakerListMap['_start_'] = ms;
      mapMakerListMap['_end_'] = me;
    } else {
      LatLng startC = lines.first;
      LatLng endC = lines.first;

      var ms = Marker(
        position: startC,
        icon: BitmapDescriptor.fromIconPath('assets/map/start.png'),
        zIndex: 2,
      );
      var me = Marker(
        position: endC,
        icon: BitmapDescriptor.fromIconPath('assets/map/end.png'),
        zIndex: 2,
      );

      mapMakerListMap['_start_'] = ms;
      mapMakerListMap['_end_'] = me;
    }

    setState(() => null);
  }

  mapClean() async {
    mapMakerListMap.clear();
    mapPolylineListMap.clear();
    setState(() => null);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(0),
      ),
      clipBehavior: Clip.hardEdge,
      child: AMapWidget(
        ///配置apiKey,设置为null或者不设置则优先使用native端配置的key
        apiKey: AMAP_KEYS,
        scaleEnabled: true,
        labelsEnabled: true,
        markers: Set<Marker>.of(mapMakerListMap.values),
        polylines: Set<Polyline>.of(mapPolylineListMap.values),
        onMapCreated: (controller) async {
          _mapController = controller;
          await Permission.locationAlways.request();
          // 渲染轨迹 坐标点 以及定位地图中心
          initOrRefresh();
        },
        onTap: (latLng) {
          print(latLng.toString());
        },
        onPoiTouched: (poi) {
          print(poi.toString());
        },
      ),
    );
  }
}

QQ技术交流群：707 196 135  (大前端技术交流群)