Flutter 高德地圖（amap_base）

本文先介紹一下 Flutter 的中使用高德地圖amap_base庫的簡單使用呻澜，以及內(nèi)部是什么結(jié)構(gòu)，再探索下原生和 Flutter 之間的關(guān)系劫狠，以及一些我在嘗試中遇到的問題及解決。

介紹 Flutter

Flutter 是 Google 發(fā)布的一個用于創(chuàng)建跨平臺、高性能移動應用的框架甲脏。Flutter有著自己的繪制底層，沒有使用原生控件妹笆，開發(fā)者使用自身的布局來繪制UI块请。開發(fā)者可以通過 Dart 語言開發(fā) App，一套代碼同時運行在 iOS 和 Android平臺拳缠。Flutter 提供了豐富的組件墩新、接口，開發(fā)者可以很快地為 Flutter 添加 Native 擴展窟坐。

前提工作

開發(fā)環(huán)境搭建點我

編輯器：筆者使用的是Android Studio

Flutter Version：1.5.4-hotfix.2

Dart Version：2.3.0

image

在至少一個平臺通過后就ok啦海渊。

環(huán)境搭建好了后新建一個工程，文件目錄是這樣滴：

image

這個目錄提供了這些信息：

android文件夾下是安卓能夠直接編譯的工程
iOS文件夾下是蘋果能夠直接編譯的工程
pubspec.yaml是管理packages下載的
lib文件下是我們開發(fā)布局的Dart代碼
assets是工程本地的圖片
build是工程編譯后產(chǎn)生的文件信息

?? 我們在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

路徑規(guī)劃功能：

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));
    });
  }

效果如下：

image

這里有2個小問題：

因為dart是強類型語言芙盘，所以LatLng中傳入（30，104）這樣的int類型的數(shù)字則會報Unhandled Exception: type 'int' is not a subtype of type 'double' in type cast的錯誤
添加Marker的本地圖片名字不能包含中文

我們來看看路線規(guī)劃的內(nèi)部實現(xiàn)：

image.png

????????? 好像沒看到規(guī)劃的邏輯脸秽，但是看到了調(diào)用了searchChannel.invokeMethod方法然后給‘calculateDriveRoute”類的_routePlanParam屬性傳入了_routePlanParam參數(shù)儒老。

我們回到最開始的工程目錄里打開iOS工程：

280B88E8-8D04-467A-B8BD-D81941913D5D.png

...竟然隱藏的這么深足足打開了10幾個文件夾，這時候我們看search文件夾下的SearchHandlers.m记餐，果然搜索到了calculateDriveRoute：

96FE91CA-8ABC-4915-83CD-7D33D1C60376.png

通過調(diào)用onMethodCall：方法對參數(shù)進行轉(zhuǎn)換構(gòu)造再調(diào)用高德的AMapDrivingRouteSearch方法進行回調(diào)驮樊，onRouteSearchDone回調(diào)中把數(shù)據(jù)解析一下直接返回

A8A222EB-7CAC-4203-A763-F45F87AAE823.png

當前版本的amap_base還不完善，有些功能的屬性無法做到雙端統(tǒng)一
package中想看到的內(nèi)部實現(xiàn)則需要到工程文件夾里找

新人寫的不好片酝，還請各位海涵??

其他

說明：
本文僅供用于學習參考囚衔，請勿用于商業(yè)用途。如需轉(zhuǎn)載雕沿，請標明出處练湿，謝謝合作。

本文在學習flutter資料以及個人學習體會總結(jié)所得审轮，部分內(nèi)容為網(wǎng)絡(luò)公開學習資料肥哎，如有侵權(quán)請聯(lián)系作者刪除。

參考資料：
Flutter 中文網(wǎng)：https://flutterchina.club