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

最新推荐文章于 2024-09-12 14:59:07 发布

Buliang_C

最新推荐文章于 2024-09-12 14:59:07 发布

阅读量1w

点赞数 15

分类专栏： flutter 文章标签： flutter 百度 ios 街景地图

本文链接：https://blog.csdn.net/o__o__o__o/article/details/120207863

版权

flutter 专栏收录该内容

3 篇文章 6 订阅

订阅专栏

非本人同意，禁止转载
最近在用flutter开发百度地图，踩坑无数，可以说把能踩的坑都踩了一遍，特此记录下辛酸经历。
下面描述的工程是配置Android的，ios并没有配置。
开发环境：sdk: “>=2.12.0 < 3.0.0”
Android Studio版本3.4.0

前言

官网里面把基本都把步骤写了，但是里面有很多不明确的点。刚接触到的人可能会不知道某些文件具体添加到哪里，代码添加也有可能出现问题。下面我将安装官网的例程步骤，一步一步进行配置。配置完成之后，一定是可以完美运行的。

一、引入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(),
        ),
      ),
    );
  }
}