前言

Flutter 作為目前通用的業(yè)界跨平臺(tái)解決方案跑芳，開辟了一套全新的設(shè)計(jì)理念聋亡，通過自研的 UI 框架际乘，支持高效構(gòu)建多端平臺(tái)上的應(yīng)用漂佩，同時(shí)保持著原生應(yīng)用一樣的高性能。
在Flutter項(xiàng)目開發(fā)過程中养葵，對插件的開發(fā)和復(fù)用能夠提高開發(fā)效率，降低工程的耦合度关拒。Flutter開發(fā)者可以引入對應(yīng)插件就可以為項(xiàng)目快速集成相關(guān)能力庸娱，從而專注于具體業(yè)務(wù)功能的實(shí)現(xiàn)。
而在Flutter項(xiàng)目開發(fā)過程中面對通用業(yè)務(wù)邏輯拆分熟尉、或者需要對原生能力封裝等場景時(shí)，開發(fā)者需要開發(fā)新的組件剧包。

為減少開發(fā)者同時(shí)開發(fā)Android和iOS應(yīng)用的成本，提升開發(fā)效率疆液，降低集成地圖SDK的門檻，騰訊位置服務(wù)團(tuán)隊(duì)也計(jì)劃于業(yè)務(wù)實(shí)踐中基于原生地圖SDK能力封裝一套地圖Flutter插件馅闽，支持Flutter開發(fā)者跨平臺(tái)調(diào)用地圖SDK接口馍迄。
筆者在2019年實(shí)習(xí)期間，曾基于當(dāng)時(shí)的最新版本4.2.4的Android地圖SDK暴凑，將地圖SDK中一些常用的基礎(chǔ)的地圖操作功能封裝现喳，構(gòu)建了一套Android端的地圖SDK Flutter插件犬辰。

現(xiàn)如今，地圖SDK已經(jīng)迭代到了4.4.0版本灸促，筆者也將地圖Flutter插件進(jìn)行了一次相關(guān)版本升級涵卵。
本篇文章將介紹地圖Flutter插件項(xiàng)目的構(gòu)建、地圖實(shí)例的加載以及demo示例呈現(xiàn)典鸡。對于地圖基礎(chǔ)操作的功能封裝細(xì)節(jié)將在后續(xù)文章中進(jìn)行詳細(xì)講解說明坏晦。

地圖Flutter插件項(xiàng)目的構(gòu)建

地圖Flutter插件項(xiàng)目結(jié)構(gòu)

地圖Flutter插件項(xiàng)目構(gòu)架的整體結(jié)構(gòu)如下圖所示：

structure.png

android/ios目錄：原生代碼昆婿。對應(yīng)為Android/iOS Flutter插件目錄。

lib目錄：Dart 代碼汁尺。Flutter開發(fā)者將會(huì)使用這里的Flutter插件實(shí)現(xiàn)的接口多律。

example目錄：地圖SDK的demo程序搂蜓。用于驗(yàn)證Flutter插件的可用性的使用示例帮碰。

地圖Flutter插件依賴配置項(xiàng)

Android端的Flutter插件配置項(xiàng)與官網(wǎng)關(guān)于Android地圖SDK的配置說明類似拾积，需要配置android目錄下的兩個(gè)文件：build.gradle、AndroidManifest.xml斯碌。
其中Android端的Flutter插件的包名為com.tencent.tencentmap肛度，AndroidManifest.xml文件配置如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.tencent.tencentmap">
    <!-- 騰訊地圖 sdk 要求的權(quán)限(開始) -->
    <!-- 訪問網(wǎng)絡(luò)獲取地圖服務(wù) -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 檢查網(wǎng)絡(luò)可用性 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 訪問WiFi狀態(tài) -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 需要外部存儲(chǔ)寫權(quán)限用于保存地圖緩存 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- 獲取 device id 辨別設(shè)備 -->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <!-- 獲取日志讀取權(quán)限，幫助我們提高地圖 sdk 穩(wěn)定性 -->
    <uses-permission android:name="android.permission.READ_LOGS" />
    <!-- 騰訊地圖 sdk 要求的權(quán)限(結(jié)束) -->


    <!-- 騰訊定位 sdk 要求的權(quán)限  (開始) -->
    <!-- 通過GPS得到精確位置 -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- 通過網(wǎng)絡(luò)得到粗略位置 -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <!-- 訪問網(wǎng)絡(luò). 某些位置信息需要從網(wǎng)絡(luò)服務(wù)器獲取 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 訪問WiFi狀態(tài). 需要WiFi信息用于網(wǎng)絡(luò)定位 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 修改WiFi狀態(tài). 發(fā)起WiFi掃描, 需要WiFi信息用于網(wǎng)絡(luò)定位 -->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <!-- 訪問網(wǎng)絡(luò)狀態(tài), 檢測網(wǎng)絡(luò)的可用性. 需要網(wǎng)絡(luò)運(yùn)營商相關(guān)信息用于網(wǎng)絡(luò)定位 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 訪問網(wǎng)絡(luò)的變化, 需要某些信息用于網(wǎng)絡(luò)定位 -->
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
    <!-- 訪問手機(jī)當(dāng)前狀態(tài), 需要device id用于網(wǎng)絡(luò)定位 -->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

    <!-- 騰訊定位 sdk 要求的權(quán)限 (結(jié)束) -->
    <application>

        <!-- 如果您key確認(rèn)無誤，卻依然授權(quán)沒有通過加袋，請檢查您的key的白名單配置 -->
        <meta-data
            android:name="TencentMapSDK"
            android:value="Your key"/>
    </application>
</manifest>

本文使用的Android端地圖SDK版本為4.4.0。同時(shí)扁誓，本文Flutter插件的實(shí)現(xiàn)語言是基于Kotlin實(shí)現(xiàn)阳堕。build.gradle的依賴配置項(xiàng)如下：

dependencies {
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.tencent.map:tencent-map-vector-sdk:4.4.0'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    compile "org.jetbrains.kotlin:kotlin-script-runtime:1.2.71"
}

地圖Flutter插件加載地圖實(shí)例

Flutter插件在上層UI Dart端與底層Native SDK端之間起到了一層橋接的作用择克。
Flutter端與Native端之間通信的流程如下圖所示：

structure1.png

Flutter 跟Native代碼可以通過 MethodChannel 進(jìn)行通信∫佳撸客戶端通過 MethodChannel 將方法調(diào)用和參數(shù)發(fā)生給服務(wù)端贱纠，服務(wù)端也通過 MethodChannel 接收相關(guān)的數(shù)據(jù)。
因此谆焊，在Flutter插件開發(fā)中浦夷，MethodChannel與EventChannel是兩個(gè)不可避免用到的類辜王。
用比較通俗的語言來解釋這兩個(gè)類的功能：

MethodChannel的作用是傳遞方法調(diào)用呐馆，例如在flutter端調(diào)用native端的方法或native端調(diào)用flutter端的方法莲兢。MethodChannel主要用于方法調(diào)用。

EventChannel的作用是發(fā)送消息收班，當(dāng)native層想通知flutter層一些消息的時(shí)候谒兄，native層發(fā)送消息，F(xiàn)lutter接收消息酣溃。EventChannel通常用于數(shù)據(jù)流通信。

后續(xù)文章將詳細(xì)講解MethodChannel與EventChannel在地圖SDK插件中的使用赊豌。
言歸正傳碘饼，本文重點(diǎn)要講解使用PlatformView對地圖實(shí)例進(jìn)行加載的流程悲伶。
PlatformView的使用方式是與MethodChannel的使用方式類似的，具體的加載地圖實(shí)例流程如下：

（1）Native端創(chuàng)建TencentMapView

TencentMapView繼承自PlatformView钠绍。
PlatformView為Flutter 1.0版本中的通用組件花沉，區(qū)分為Android和iOS。在Android平臺(tái)上叫做 AndroidView組件碱屁，在iOS平臺(tái)，叫UIKitView組件赵誓。
因此利用PlatformView構(gòu)建加載Native SDK中的地圖實(shí)例并在PlatformView中維護(hù)地圖實(shí)例的生命周期。
TencentMapView中也加入了MethodChannel與EventChannel的注冊邏輯隘冲，主要用于地圖的接口進(jìn)行雙端交互绑雄，對于這兩部分的說明將在后續(xù)文章中進(jìn)行詳細(xì)介紹。
Android端的TencentMapView實(shí)現(xiàn)如下：

class TencentMapView(context: Context, private val id: Int, private val activityState: AtomicInteger, tencentMapOptions: TencentMapOptions) : PlatformView, Application.ActivityLifecycleCallbacks{

    // 加載構(gòu)建地圖實(shí)例
    private val mapView = MapView(context, tencentMapOptions)
    private val registrarActivityHashCode: Int = TencentmapPlugin.registrar.activity().hashCode()
    
    // 維護(hù)地圖實(shí)例生命周期
    fun setup(){
        when(activityState.get()){
            STOPPED -> {
                mapView.onStop()
            }
            RESUMED -> {
                mapView.onResume()
            }
            CREATED -> {
                mapView.onStart()
            }
            DESTROYED -> {
                mapView.onDestroy()
            }
        }

        // flutter端調(diào)用地圖native SDK相關(guān)功能的MethodChannel
        val mapChannel = MethodChannel(registrar.messenger(), "$mapChannelName$id")
        mapChannel.setMethodCallHandler { methodCall, result ->
            MAP_METHOD_HANDLER[methodCall.method]
                    ?.with(mapView.map)
                    ?.onMethodCall(methodCall, result) ?: result.notImplemented()
        }
        
        // native SDK通知flutter層相關(guān)消息的EventChannel
        val mapEventChannel = EventChannel(registrar.messenger(), "$mapChannelName$id")

    }
}

（2）在插件Native層的入口文件TencentmapPlugin.kt中注冊剛寫好的TencentMapView實(shí)例tencentMapView：

@JvmStatic
    fun registerWith(registrar: PluginRegistry.Registrar){
    //將TencentMapView實(shí)例注冊到插件中
    registrar.platformViewRegistry().registerViewFactory("com.tencentmap/map", tencentMapView)
    }

（3）在Flutter端的dart代碼使用AndroidView，將AndroidView嵌入到TencentMapView中：

class TencentMapView extends StatelessWidget{
  const TencentMapView({
    this.onTencentMapViewCreated,
});
  final MapCreatedCallback onTencentMapViewCreated;
  @override
  Widget build(BuildContext context) {
    if (defaultTargetPlatform == TargetPlatform.android) {
      return AndroidView(
          viewType: 'com.tencentmap/map',
          onPlatformViewCreated: _onViewCreated,
          creationParams: {

          },
          creationParamsCodec: const StandardMessageCodec(),
      );
    }
  }
}

這里要注意的一點(diǎn)是脚粟，在Android端和Flutter端注冊的viewType中的字符串值必須保持一致，用于唯一標(biāo)識(shí)扣唱。在本文中的標(biāo)識(shí)字符串為'com.tencentmap/map'团南，將Flutter端的AndroidView與Native端的TencentMapView建立了關(guān)聯(lián)。

Flutter插件對應(yīng)Demo示例呈現(xiàn)

Demo示例

demo UI采用了Flutter自支持的Material Design風(fēng)格的一套UI組件吐根。
Flutter demo調(diào)用地圖SDK展示地圖實(shí)例的界面如圖所示：

Screenshot_20210324_164152_com.tencent.tencentmap_example.jpg

demo中還實(shí)現(xiàn)了地圖基礎(chǔ)操作的相關(guān)功能性接口拷橘，例如相關(guān)覆蓋物的繪制等，示例如下圖所示：

Screenshot_20210324_164210_com.tencent.tencentmap_example.jpg

Screenshot_20210324_164237_com.tencent.tencentmap_example.jpg

版本升級過程中遇到的小坑

在實(shí)際版本升級過程中萄唇，原有項(xiàng)目的demo運(yùn)行起來是白屏另萤，控制臺(tái)打印出如下信息：

[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized.
If you're running an application and need to access the binary messenger before `runApp()` has been called (for example, during plugin initialization), then you need to explicitly call the `WidgetsFlutterBinding.ensureInitialized()` first.
If you're running a test, you can call the `TestWidgetsFlutterBinding.ensureInitialized()` as the first line in your test's `main()` method to initialize the binding.
#0      defaultBinaryMessenger.<anonymous closure> (package:flutter/src/services/binary_messenger.dart:76:7)
#1      defaultBinaryMessenger (package:flutter/src/services/binary_messenger.dart:89:4)
#2      MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:140:62)
#3      MethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:314:35)
#4      MethodChannel.invokeMapMethod (package:flutter/src/services/platfo<…>

根據(jù)控制臺(tái)的輸出信息仲墨，經(jīng)過查閱相關(guān)資料后找到了原因：該問題由Flutter版本升級導(dǎo)致的重大更改引起的：https://groups.google.com/g/flutter-announce/c/sHAL2fBtJ1Y/m/mGjrKH3dEwAJ
具體解決方法為：在main.dart文件中的main方法中揍障，需要在runApp()前顯式調(diào)用如下代碼：

WidgetsFlutterBinding.ensureInitialized();

總結(jié)

本文主要介紹了騰訊地圖SDK Flutter插件項(xiàng)目的構(gòu)建俩由、地圖實(shí)例加載、demo呈現(xiàn)兜畸，對地圖基礎(chǔ)功能性接口的封裝細(xì)節(jié)，將會(huì)在后續(xù)文章持續(xù)講解伐蒂。

作者：騰訊位置服務(wù)

鏈接：https://blog.csdn.net/weixin_45628602/article/details/115394375

來源：CSDN

著作權(quán)歸作者所有肛鹏。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處缕减。