Flutter应用开发：地图定位-搜索-轨迹

背景

项目是个物流项目，随着业务需求的迭代，地图功能上的使用也是由浅入深。主要由高德地图应用为基础，从一个小白的角度摸索开发及实现业务落地，中间可能走了不少弯路，不过也是成长的过程。

入门

开始构建时就引入的地图插件flutter_2d_amap，最初只有一个运输中车辆坐标的展示，基本满足需求。只需要根据高德地图对接flutter的流程配置一遍。

// pubspec.yaml
flutter_2d_amap:
    git:
      url: https://github.com/simplezhli/flutter_2d_amap.git

// AndroidManifest.xml
// 高德Key在高德地图平台申请
<!-- 高德地图 -->
<meta-data
      android:name="com.amap.api.v2.apikey"
      android:value="@string/amap_key"/>

//业务使用
import 'package:flutter_2d_amap/flutter_2d_amap.dart';

void _initMap() {
    Flutter2dAMap.updatePrivacy(true);
    Flutter2dAMap.setApiKey(iOSKey: "4e7f3372xxxxxxxxd510ba631");
}
  
AMap2DView(
      zoom: 24,
      fixMarker: true,
      isPoiSearch: false,
      fixLatLng: latLngMap(_latitude, _longitude),
      onPoiSearched: (result) {},
      onAMap2DViewCreated: (controller) async {
        _aMap2DController = controller;
      },
)

需求升级 +1

在使用中由之前选择省/市/区模式新建地址变更为从地图上选择、搜索地址新建，flutter_2d_amap在使用中慢慢不能满足需求，经过分析只能对flutter_2d_amap插件进行二次开发。

// 先单独提出git项目自己维护
// pubspec.yaml
flutter_2d_amap:
    path: ../packages/logistic-amap

在logistic-amap中增加诸多参数来满足多场景业务。

// 是否支持地址搜索
isPoiSearch  true/false

// 是否固定Marker(地图拖动，指针也随地图移动)
fixMarker true/false

// 传入初始化坐标lng,lat，不传入默认当前定位坐标 
fixLatLng {'lng':127.1544,'lat':37.1212}

// 地图放缩zoom
zoom 16

isPoiSearch

地图设置成搜索模式，拖动地图、点击地图、输入文本搜索地图都会查出附近地理位置，这个参数最大的修改点是在拖动/点击地图时涉及逆地理位置解析的过程，逆地理位置解析的地址信息组装成附近地址的第一条精确位置。 即上图的地址列表由两部分数据构成：

• 指针坐标逆地理位置解析出的一条精度很高的数据
• 地址搜索附近的多条地址数据（如果指针定位在山里，附近的数据偏差可能±3KM）

fixMarker

是否固定指针，适应两种场景。

• true 查看地图定位，即定位是固定的，拖动、放缩地图都随地图移动
• false操作地图定位，点击/拖动地图时变更指针

fixLatLng

地图初始化时设置默认初始定位点，本身初始化完成再通过map.move也能移动到目标定位点，但是在体验上有明显地图移动过程，最终加个这个参数直接初始化地图时完成目标坐标定位。

zoom

地图zoom，根据业务需求不同的场景zoom默认不同

需求升级 +2

通过司机端APP的定位数据收集，达到绘制大概轨迹的程度。地图车辆行驶轨迹需求落地。 logistic-amap项目再次深度开发，单独提出轨迹类TrackView.java。

AmapTrackView(
    tracks: _trackModels(),
    startLocation: startLocation,
    endLocation: endLocation,
    showCar: true,
    onTrackViewCreated: (controller) {
      _aMapTrackController = controller;
      controller.display();
    },
 )

地图轨迹应用场景目前单一，参数配置也比较固定。

// 一组定位坐标
tracks  List<TrackPointModel>

// 起点坐标
startLocation TrackPointModel

// 终点坐标
startLocation TrackPointModel

// 是否显示轨迹上当前定位点图标
showCar true/false

需求升级 +3

Flutter APP中展示的地图功能有限，也缺乏导航等能力，需要快捷访问高德地图本身APP。根据高德地图平台API文档结合自身需求，拼接访问链接。

    showDialog<void>(
        context: context,
        builder: (_) => MapJumpDialog(onSure: () async {
              String url =
                  '${Device.isAndroid ? 'android' : 'ios'}amap://viewMap?sourceApplication=com.juhui&lat=$latitude&lon=$longitude&poiname=${address ?? '[位置]'}&dev=0';
              if (Device.isIOS) url = Uri.encodeFull(url);
              try {
                await launchUrlString(url);
                return true;
              } on Exception catch (e) {
                if (showErr) toast('无法调起高德地图');
                return false;
              }
            }));

需求待升级 +4

根据物流公司发布的线路，在司机开车运输中，监听线路和实际轨迹的偏差做出告警。从而保障时效和成本。即地图上可能会绘制一条虚线线路和实时实线轨迹，根据偏差显示告警。

后记

Flutter Map随着开发深入，慢慢会变成Flutter + android开发模式。在开发之初最好能选个比较成熟、功能齐全的第三方插件能节省很多麻烦。