最近在用flutter開發百度地圖,踩坑無數,可以說把能踩的坑都踩了一遍,特此記錄下辛酸經歷,
下面描述的工程是配置Android的,ios并沒有配置,
開發環境:sdk: “>=2.12.0 < 3.0.0”
Android Studio版本3.4.0
文章目錄
- 前言
- 一、引入flutter插件
- 二、 新建一個自定義的Application
- 三、混淆配置
- 四、AK配置(秘鑰配置)
- 五、顯示地圖
- 六、最終效果圖
- 遇到的其他問題
- 總結
前言
官網里面把基本都把步驟寫了,但是里面有很多不明確的點,剛接觸到的人可能會不知道某些檔案具體添加到哪里,代碼添加也有可能出現問題,下面我將安裝官網的例程步驟,一步一步進行配置,配置完成之后,一定是可以完美運行的,
一、引入flutter插件
flutter_baidu_mapapi_map
flutter_baidu_mapapi_search
fflutter_baidu_mapapi_utils
離譜的事情來了:官網上面的第三個插件flutter_baidu_mapapi_utils,多寫一個f,flutter,官網寫成fflutter, 我也沒看清,直接復制的,導致我怎么安裝都安裝不了,人都傻了,

注意!!!: 這三個依賴的版本要獲取官網最新的!!!不然在你引入依賴包的時候,run會報空安全錯誤,Error: Cannot run with sound null safety, because the following dependencies,
解決方法:
- 就是獲取最新版的依賴,
- 還有一種解決辦法是將sdk的版本降低到2.0以下,
因為:Dart 語言已支持健全的空安全機制!
當你選擇使用空安全時,代碼中的型別將默認是非空的,意味著 除非你宣告它們可空,它們的值都不能為空,有了空安全,原本處于你的 運行時 的空值參考錯誤將變為 編輯時 的分析錯誤,

二、 新建一個自定義的Application
很多剛開發的新人根本不知道在哪里新建自定義的Application,
第一步: 打開Android的底層

第二步(最關鍵)在app下面的層級下對應的目錄里面創建一個MyApplication.java檔案

在里面添加上如下的代碼:記得修改下第一行package包的名字,改成自己專案的名字!!!
package com.example.flutter_map_blue;
import com.baidu.mapapi.SDKInitializer;
import com.baidu.mapapi.base.BmfMapApplication;
import io.flutter.app.FlutterApplication;
public class MyApplication extends BmfMapApplication {
@Override
public void onCreate() {
super.onCreate();
}
}
等添加好后,就可以回到開發界面了,有可能你添加的那個檔案,會報紅,但是別怕,編譯不會有問題的,具體什么原因我也不清楚,因為我的也報紅,,,有人知道的話,可以評論區指點下,
第三步 在AndroidManifest.xml中宣告該Application,ctrl點擊是可以跳轉的

三、混淆配置
官網上面有說明,這一步跟官網保持一致,具體是說明直接看官網就好了,
- 打開android 目錄app下的build.gradle檔案,在release代碼塊中添加如下內容,(默認情況下 flutter 不會開啟 Android 的混 淆)

- 創建/android/app/proguard-rules.pro 檔案

- 撰寫混淆檔案,打開proguard-rules.pro檔案,添加如下代碼,
proguard-rules.pro里面的代碼:

上述配置完成之后,基礎配置就已經全部結束了,下面就將進行秘鑰的配置項,
四、AK配置(秘鑰配置)
- 在main.dart的main函式中添加如下代碼:

- Android平臺需要在AndroidManifest.xml檔案里設定AK:

五、顯示地圖
創建一個widget的dart檔案,把下面的代碼復制進去,就是顯示地圖的,
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';
import 'package:flutter_baidu_mapapi_search/flutter_baidu_mapapi_search.dart';
import 'package:flutter_map_blue/BaiduMapHelper.dart';
class TestBaiduMapPage extends StatefulWidget {
@override
_TestBaiduMapPageState createState() => _TestBaiduMapPageState();
}
class _TestBaiduMapPageState extends State<TestBaiduMapPage> {
BMFMapController? dituController;
@override
void initState() {
super.initState();
}
/// 創建完成回呼
void onBMFMapCreated(BMFMapController controller) {
dituController = controller;
/// 地圖加載回呼
dituController?.setMapDidLoadCallback(callback: () {
print('mapDidLoad-地圖加載完成!!!');
});
}
/// 設定地圖引數
BMFMapOptions initMapOptions() {
BMFMapOptions mapOptions = BMFMapOptions(
center: BMFCoordinate(39.917215, 116.380341),
zoomLevel: 12,
changeCenterWithDoubleTouchPointEnabled:true,
gesturesEnabled:true ,
scrollEnabled:true ,
zoomEnabled: true ,
rotateEnabled :true,
compassPosition :BMFPoint(0,0) ,
showMapScaleBar:false ,
maxZoomLevel:15,
minZoomLevel:8,
// mapType: BMFMapType.Satellite
);
return mapOptions;
}
@override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return Scaffold(
body:Container(
width: screenSize.width,
height: screenSize.height,
child: BMFMapWidget(
onBMFMapCreated: (controller) {
onBMFMapCreated(controller);
},
mapOptions: initMapOptions(),
),
),
);
}
}
六、最終效果圖

遇到的其他問題
- AndroidStudio Cannot fit requested classes in a single dex file (# methods: 72633 > 65536)
看了很多博客說是下面這個原因:
當您的應用及其參考的庫包含的方法數超過 65536 時,您會遇到一個構建錯誤
我的解決辦法是用flutter clear這個命令,然后關機重啟了一下,就好了,具體什么原因我也不清楚,
- Execution failed for task ‘:app:compileFlutterBuildDebug’. > Process 'command 'D:\flut
這個問題我也是通過flutter clear;然后flutter run解決的,
期間還遇到了很多很多各式各樣的問題,遇到問題不要怕,我百度不死他!
總結
源代碼暫時還沒有貼上來,按照上述的步驟應該是沒有任何問題的,如果大家有問題,可以留言下,喜歡這篇教程的話記得一鍵三連,謝謝!
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/299367.html
標籤:其他
上一篇:微信人臉SDK集成踩坑
