Flutter 高德地图（amap_base）

本文先介绍一下 Flutter 的中使用高德地图amap_base库的简单使用，以及内部是什么结构，再探索下原生和 Flutter 之间的关系，以及一些我在尝试中遇到的问题及解决。

介绍 Flutter

Flutter 是 Google 发布的一个用于创建跨平台、高性能移动应用的框架。Flutter有着自己的绘制底层，没有使用原生控件，开发者使用自身的布局来绘制UI。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android平台。Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展。

前提工作

开发环境搭建点我

编辑器：笔者使用的是Android Studio

Flutter Version：1.5.4-hotfix.2

Dart Version：2.3.0

image

在至少一个平台通过后就ok啦。

环境搭建好了后新建一个工程，文件目录是这样滴：

image

这个目录提供了这些信息：

android文件夹下是安卓能够直接编译的工程
iOS文件夹下是苹果能够直接编译的工程
pubspec.yaml是管理packages下载的
lib文件下是我们开发布局的Dart代码
assets是工程本地的图片
build是工程编译后产生的文件信息

👌 我们在pubspec.yaml文件里加入amap_base，注意一个点pubspec.yaml文件的格式十分严谨，必须在dependencies下并且缩进一个tab，否则会不识别

image

flutter packages get 获取新库

在我们获取完后在External Libraries-->Dart Packages下可以看到有个amap_base的文件夹，这里面就是和原生高德库Channel的各类。
好啦，话不多说，直接开始
首先要初始化地图：

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("地图测试"),
      ),
      body: Padding(
        padding: EdgeInsets.all(0),
        child: AMapView(
          onAMapViewCreated: (mapController) {
            _mapController = mapController;
            mapController.setZoomLevel(10);
            mapController.setMyLocationStyle(MyLocationStyle(
              showsHeadingIndicator: false,
              myLocationType: LOCATION_TYPE_FOLLOW_NO_CENTER,
            ));

            mapLocation();
          },
        ),
      ),
    );
  }
mapLocation() {
    AMapLocation mapLocation = AMapLocation();
    mapLocation
        .startLocate(LocationClientOptions(
      allowsBackgroundLocationUpdates: true,
      locatingWithReGeocode: true,
    ))
        .listen((location) {
      print(location.latitude.toString() +
          location.longitude.toString() +
          '------->>>>>>');
    });
  }

效果如下：

image

路径规划功能：

search(LatLng fromLatLng) {
    print("搜索");
    LatLng latLng = LatLng(30.67, 104.07);
    AMapSearch search = AMapSearch();
    search
        .calculateDriveRoute(RoutePlanParam(from: fromLatLng, to: latLng))
        .then((driveRouteResult) {
      DrivePath path = driveRouteResult.paths[0];

      List<LatLng> list = List();
      for (var value1 in path.steps) {
        list.addAll(value1.polyline);
      }

      _mapController.addMarker(
        MarkerOptions(
          position: latLng,
          icon: "assets/images/1.3.0_end_icon.png",
        ),
      );
      _mapController.addPolyline(PolylineOptions(latLngList: list, width: 10));
    });
  }

效果如下：