Flutter整合高德定位和地圖功能

艾維碼發表於2021-07-20

「本文已參與好文召集令活動,點選檢視:後端、大前端雙賽道投稿,2萬元獎池等你挑戰!

定位整合

配置高德定位依賴庫

新建 Flutter 專案,使用 Android Studio 開啟專案裡的 android 工程,或者右鍵 android 目錄-> flutter -> open Android module in Android Studio。

1.png

在 Android 工程裡,切換為 Android 檢視:

2.png

開啟 build.gradle 檔案,新增定位依賴包:

implementation('com.amap.api:location:5.2.0')
複製程式碼

image.png

點選 Sync Now 或者 工具欄上的?圖示同步依賴包:

image.png

開啟清單檔案AndroidManifest.xml,配置許可權和服務:

    <!--訪問網路-->
    <uses-permission android:name="android.permission.INTERNET" />
    <!--粗略定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <!--精確定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!--申請呼叫A-GPS模組-->
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <!--用於獲取運營商資訊,用於支援提供運營商資訊相關的介面-->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!--用於訪問wifi網路資訊,wifi資訊會用於進行網路定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!--用於獲取wifi的獲取許可權,wifi資訊會用來進行網路定位-->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <!--用於讀取手機當前的狀態-->
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <!--用於寫入快取資料到擴充套件儲存卡-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
複製程式碼
      <!-- 配置定位Service -->
       <service android:name="com.amap.api.location.APSService"/>
複製程式碼

image.png

配置簽名檔案

高德平臺需要簽名的 sha1 ,所以需要配置簽名檔案,debug 模式除錯和正式包各需要一個,也可以使用同一個 keystore 。 工具欄 Build -> Generate Signed Bundle / APK -> 選擇 APK -> Next -> Create new ,開啟 New Key Store 視窗:

image.png

image.png

key store path 選擇當前專案根目錄或者你喜歡的任何目錄,命名為 debug.keystore 或者你喜歡的名字,兩個地方的 Password 可以一樣,Alias 需要填寫,下面的 Certificate 填寫一項即可:

image.png

點選 ok -> 點選 Next,選擇 debug ,當然如果 debug 和 release 使用同一個簽名檔案的話也可同時選擇 debug 和 release,並勾選 V2 簽名:

image.png

完成後可以看到專案裡的 debug.keystore 檔案:

image.png

重複上面方法,再建立一個 release.keystore 檔案。點選 Project Structure:

image.png

選擇 Modules -> app -> Signing Configs -> + -> 預設有 debug,再新增一個 release ,分別選擇對應的 keystore:

image.png

點選 ok 後再次開啟 build.gradle 檔案,可以看到簽名配置對應剛才配置的簽名檔案:

signingConfigs {
        debug {
            storeFile file('/Users/apple/AndroidStudioProjects/flutter/map_demo/android/debug.keystore')
            storePassword '123456'
            keyAlias 'amap'
            keyPassword '123456'
        }
        release {
            storeFile file('/Users/apple/AndroidStudioProjects/flutter/map_demo/android/release.keytore')
            storePassword '123456'
            keyAlias 'amap'
            keyPassword '123456'
        }
    }
複製程式碼

高德平臺 Key 申請

開啟高德開放平臺 | 高德地圖API (amap.com),註冊成為高德開放平臺使用者,開啟控制檯建立一個應用,填入對應的資訊,這裡有個錯誤,SHA1 其實是 MD5 ,不要填寫 SHA1。

image.png 獲取MD5: 在剛才的專案裡,開啟 Terminal,輸入下面命令,路徑就是 debug.keystore 和 release.keystore的路徑:

keytool -list -v -keystore  ./debug.keystore
複製程式碼

輸入祕鑰庫口令,就是設定的 Password ,複製 MD5 ,去高德開放平臺貼上。

image.png

釋出版和除錯版都設定後,複製 key 。

在清單檔案裡,配置apikey

    <!-- 配置定位Service -->
       <service android:name="com.amap.api.location.APSService"/>
       <meta-data
           android:name="com.amap.api.v2.apikey"
           android:value="f6c46787c43cb7df5510d9f4c530fd1e"/>
複製程式碼

Flutter 檔案配置

回到 Flutter 專案,新增高德定位庫和許可權申請依賴,執行 pub get

  amap_flutter_location: ^2.0.0
  permission_handler:
複製程式碼

在獲取定位的入口配置許可權申請,註冊監聽:

    /// 動態申請定位許可權
    requestPermission();
    ///註冊定位結果監聽
    _locationListener = _locationPlugin
        .onLocationChanged()
        .listen((Map<String, Object> result) {
      setState(() {
        _locationResult = result;
      });
    });
複製程式碼

只要獲取到定位,這裡都會回撥,result包含了很全的定位資訊。 如果執行報錯:INVALID_USER_KEY,說明你的 keystore 的 MD5 不正確,也許平臺會把 SHA1 改為真正的 SHA1 ,所以不妨試試填入 SHA1。

地圖整合

Android工程新增地圖依賴

回到 Android 工程,新增地圖依賴:

    implementation 'com.amap.api:3dmap:5.0.0'
複製程式碼

回到 Flutter 工程,在pubspec.yaml裡新增外掛依賴:

  amap_flutter_map: ^2.0.1
複製程式碼

在佈局中使用 map :

  final AMapWidget map = AMapWidget(
      onMapCreated: onMapCreated,
      // 定位小藍點配置
      myLocationStyleOptions: MyLocationStyleOptions(true),
      // 是否指南針
      // compassEnabled: true,
    );
複製程式碼

原始碼傳送門

相關文章