Flutter集成高德定位和地圖功能

定位集成

配置高德定位依賴庫

新建 Flutter 項目,使用 Android Studio 打開項目裏的 android 工程,或者右鍵 android 目錄-> flutter -> open Android module in Android Studio。

在 Android 工程裏,切換爲 Android 視圖:

打開 build.gradle 文件,添加定位依賴包:

implementation('com.amap.api:location:5.2.0')

點擊 Sync Now 或者 工具欄上的🐘圖標同步依賴包:

打開清單文件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"/>

配置簽名文件

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


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

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

完成後可以看到項目裏的 debug.keystore 文件:



重複上面方法,再創建一個 release.keystore 文件。點擊 Project Structure:



選擇 Modules -> app -> Signing Configs -> + -> 默認有 debug,再添加一個 release ,分別選擇對應的 keystore:

點擊 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。


獲取MD5:
在剛纔的項目裏,打開 Terminal,輸入下面命令,路徑就是 debug.keystore 和 release.keystore的路徑:

keytool -list -v -keystore  ./debug.keystore

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

發佈版和調試版都設置後,複製 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,
    );

源碼傳送門

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章