flutter实战 -- 百度地图

在国内一般无法使用location提供的谷歌定位功能,所以只能选择百度地图或者高德地图提供的定位服务

1-申请AK

1-百度地图官网:flutter | 百度地图API SDK (baidu.com)

控制台 | 百度地图开放平台 (baidu.com)

2-根据提示进行认证,认证成功后跳转如下页面

3-填写应用名称和类型

4-输入以下内容SHA1和PackageName

获取包名:

获取SHA1:

1-打开cmd,输入cd .android

报错:

原因:jdk的路径没有保存进path中

找到自己的jdk文件,将路径 E:/java/jdk/bin存在PATH即可

关闭命令管理器,重新打开

输入cd .android

2-输入口令

调试版本默认密码是: android，发布模式的密码是apk的keystore设置的密码,没有直接回车

如果发现没有SHA1

解决方案

1.生成新的调试密匙

keytool -genkey -v -keystore new_debug.keystore -storepass your_password -keyalg RSA -keysize 2048 -validity 10000 -alias androiddebugkey

2-执行以下命令获取调试密匙

keytool -list -v -keystore new_debug.keystore -alias androiddebugkey

3-提交

5-获取AK成功

flutter | 百度地图API SDK (baidu.com)

2-SDK相关配置

申请Ak成功后,就可以进行如下操作了

1-在pubspec.yaml文件中引入以下依赖

flutter_baidu_mapapi_map: ^3.0.0+2 
flutter_baidu_mapapi_search: 3.2.0 
flutter_bmflocation: 3.2.1

2-在终端输入flutter pub get

如果没有报错信息,即可进行下一步

如果有报错信息,检查一下是不是版本冲突的问题,我的sdk是2.19.6

3-打开android/app/src/main/java/com/example/envcapp/,新建一个java文件,命名为MyApplication

写入以下代码,改一下包名

package com.example.envcapp;
// 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();
    }
}

4-打开android/app/src/main/AndroidManifest.xml

1-将name改为MyApplication

2-引入权限

    <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
    <!-- 获取运营商信息，用于支持提供运营商信息相关的接口-->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
    <!-- 这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
    <!-- 用于读取手机当前的状态-->
    <uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>
    <!-- 写入扩展存储，向扩展卡写入数据，用于写入离线定位数据-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
    <!-- 访问网络，网络定位需要上网-->
    <uses-permission android:name="android.permission.INTERNET" />

    <!-- 读取系统信息，包含系统版本等信息，用作统计-->
    <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
    <!-- 程序在手机屏幕关闭后后台进程仍然运行-->
    <uses-permission android:name="android.permission.WAKE_LOCK" />

3-在下引入key

<meta-data 
    android:name="com.baidu.lbsapi.API_KEY" 
    android:value="你的百度key" />

5-打开android/app/build-gradle

引入以下代码

buildTypes {
        release {
            signingConfig signingConfigs.debug
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

6-在android/app/下新建文件proguard-rules.pro

写入以下代码

-keep class com.baidu.** {*;} 
-keep class vi.com.** {*;} 
-keep class com.baidu.vi.** {*;} 
-dontwarn com.baidu.**

3-创建地图

import 'package:envcapp/pages/Weather.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/src/map/bmf_models.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';
import 'package:flutter_baidu_mapapi_search/flutter_baidu_mapapi_search.dart';


class WeatherMapPage extends StatefulWidget{
  const WeatherMapPage({super.key});

  @override
  State<WeatherMapPage> createState() => WeatherMapState();
 
}

class WeatherMapState extends State<WeatherMapPage>{
  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(     
      backgroundColor: Color.fromRGBO(240, 243, 250, 1), 
      body: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Stack(
          children: [
            Container(
              width: screenSize.width,
              height: screenSize.height,
              child: BMFMapWidget(                  
              onBMFMapCreated: (controller) {
                onBMFMapCreated(controller);
              },
              mapOptions: initMapOptions(),
              ),
            ),
            Positioned(
              top: 20,
              left: 5,
              child: IconButton(
                onPressed: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) =>const Weather()));
                }, 
                icon:const Icon(Icons.navigate_before,color: Color.fromRGBO(0, 0, 0, 0.3),size: 40,), 
                ),
            )

          ],
        ),
      )
    );
  }
}

有关百度地图遇到的报错可以看我的下一篇文章flutter实战 -- 百度地图报错-CSDN博客