当前位置:首页 » 《资源分享》 » 正文

Flutter开发百度地图,踩坑无数,保姆级教程_o__o__o__o的博客

6 人参与  2021年10月01日 12:03  分类 : 《资源分享》  评论

点击全文阅读


最近在用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。
解决方法

  1. 就是获取最新版的依赖。
  2. 还有一种解决办法是将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点击是可以跳转的

在这里插入图片描述

三、混淆配置

官网上面有说明,这一步跟官网保持一致,具体是说明直接看官网就好了。

  1. 打开android 目录app下的build.gradle文件,在release代码块中添加如下内容。(默认情况下 flutter 不会开启 Android 的混 淆)

在这里插入图片描述

  1. 创建/android/app/proguard-rules.pro 文件

在这里插入图片描述

  1. 编写混淆文件,打开proguard-rules.pro文件,添加如下代码。

proguard-rules.pro里面的代码:
在这里插入图片描述


上述配置完成之后,基础配置就已经全部结束了。下面就将进行秘钥的配置项。

四、AK配置(秘钥配置)

  1. 在main.dart的main函数中添加如下代码:

在这里插入图片描述

  1. 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(),
        ),
      ),
    );
  }
}

六、最终效果图

在这里插入图片描述

遇到的其他问题

  1. AndroidStudio Cannot fit requested classes in a single dex file (# methods: 72633 > 65536)
    看了很多博客说是下面这个原因:

当您的应用及其引用的库包含的方法数超过 65536 时,您会遇到一个构建错误

我的解决办法是用flutter clear这个命令,然后关机重启了一下,就好了。具体什么原因我也不清楚。

  1. Execution failed for task ‘:app:compileFlutterBuildDebug’. > Process 'command 'D:\flut
    这个问题我也是通过flutter clear;然后flutter run解决的。

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

总结

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


点击全文阅读


本文链接:http://zhangshiyu.com/post/29104.html

配置  官网  文件  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1