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

介紹 Flutter

Flutter 是 Google 發(fā)布的一個用于創(chuàng)建跨平臺、高性能移動應(yī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文件的格式十分嚴(yán)謹(jǐn)，必須在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

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

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

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

其他

1. 說明：
   本文僅供用于學(xué)習(xí)參考，請勿用于商業(yè)用途。如需轉(zhuǎn)載，請標(biāo)明出處，謝謝合作。

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

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