Flutter开发百度地图，踩坑无数，保姆级教程（1）_Buliang_C_flutter 百度地图

大大的周 02-07 2892

非本人同意，禁止转载最近在用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解决的。

期间还遇到了很多很多各式各样的问题，遇到问题不要怕，我百度不死他！

总结

源代码暂时还没有贴上来。按照上述的步骤应该是没有任何问题的。如果大家有问题，可以留言下。喜欢这篇教程的话记得一键三连，谢谢！