百度地图flutter 地图demo使用（超详细教程）

最新推荐文章于 2024-09-19 09:56:24 发布

折了往衷.

最新推荐文章于 2024-09-19 09:56:24 发布

阅读量1.9k

点赞数 4

文章标签：百度 flutter

本文链接：https://blog.csdn.net/D2461798571/article/details/132719136

版权

百度地图flutter 地图demo使用（超详细教程）

在经历过无数次报错后，痛定思动，决定照着官方demo一点一点扣，终于跑通了demo。借此机会记录下来，分享给有需要的兄弟们（新人小白，如有错误，还请见谅，谢谢）。

flutter 3.13.2
jdk 1.8
AS 2021.3.14.1
baidumap_flutter_demo ^3.4.1

1. 创建flutter项目

首先在AS上新建好一个flutter项目，注意自己包名，后面申请百度地图key时要用。开发语言我选的是Java，kotlin没有尝试过，应该也可以。

在这里插入图片描述

等项目加载完成后，右键点击项目，选择flutter，打开Android module。

在这里插入图片描述

没有flutter选项的，也可以点击flie，点击open，选择项目里面的Android打开。

在这里插入图片描述

打开后，等待项目加载，等到bulid完成，就可以用vscode打开此项目了。

在这里插入图片描述

2 配置相关文件

接下来配置相关文件，跑通官方demo。

2.1配置android文件

2.1.1 首先进入android\app\src\main\java\com

官方demo给了两个Java文件，我们可以直接copy过来，自己的MainActivity.java文件可以删掉。

注意：将包名改成自己的，就是第一行代码：

package com.baidu.flutter_bmfmap_example;

在这里插入图片描述

MapActivity.java：

package com.baidu.flutter_bmfmap_example;

import com.baidu.bmfmap.utils.Constants;
import com.baidu.bmfmap.utils.Env;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.util.Log;
import androidx.annotation.NonNull;
import androidx.localbroadcastmanager.content.LocalBroadcastManager;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;


@SuppressLint("Registered")
public class MapActivity extends FlutterActivity {


    private static final String TAG = MapActivity.class.getSimpleName();

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }

    @Override
    public void onStart(){
        super.onStart();
        Log.d(TAG, "onStart");
    }

    @Override
    public void onResume(){
        super.onResume();
        Log.d(TAG, "onResume");
    }

    @Override
    public void onDestroy(){
        super.onDestroy();
        Log.d(TAG, "onDestroy");
    }

    @Override
    protected void onSaveInstanceState(Bundle outState){
        super.onSaveInstanceState(outState);
        Log.d(TAG, "onSaveInstanceState");
    }

    @Override
    protected void onRestoreInstanceState(Bundle savedInstanceState) {
        super.onRestoreInstanceState(savedInstanceState);
        Log.d(TAG, "onRestoreInstanceState");
    }

    @Override
    public  void onConfigurationChanged(Configuration newConfig){
        super.onConfigurationChanged(newConfig);
        Log.d(TAG, "onConfigurationChanged");
        Intent intent = new Intent(Constants.sConfigChangedAction);
        LocalBroadcastManager.getInstance(this).sendBroadcast(intent);
    }
}

MyApplication.java：

package com.baidu.flutter_bmfmap_example;

import com.baidu.mapapi.base.BmfMapApplication;

public class MyApplication extends BmfMapApplication {
    @Override
    public void onCreate() {
        super.onCreate();
    }
}

2.1.2然后进入android\app\src\main\java\io

官方在GeneratedPluginRegistrant.java里面添加了一些代码，个人感觉可加可不加。

在这里插入图片描述

GeneratedPluginRegistrant.java：

package io.flutter.plugins;

import androidx.annotation.Keep;
import androidx.annotation.NonNull;
import io.flutter.Log;

import io.flutter.embedding.engine.FlutterEngine;

/**
 * Generated file. Do not edit.
 * This file is generated by the Flutter tool based on the
 * plugins that support the Android platform.
 */
@Keep
public final class GeneratedPluginRegistrant {
  private static final String TAG = "GeneratedPluginRegistrant";
  public static void registerWith(@NonNull FlutterEngine flutterEngine) {
     // 下面就是官方添加的代码了
      try {
      flutterEngine.getPlugins().add(new dev.fluttercommunity.plus.device_info.DeviceInfoPlusPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin device_info_plus, dev.fluttercommunity.plus.device_info.DeviceInfoPlusPlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new com.baidu.mapapi.base.FlutterBmfbasePlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin flutter_baidu_mapapi_base, com.baidu.mapapi.base.FlutterBmfbasePlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new com.baidu.bmfmap.FlutterBmfmapPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin flutter_baidu_mapapi_map, com.baidu.bmfmap.FlutterBmfmapPlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new com.baidu.mapapi.search.FlutterBmfsearchPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin flutter_baidu_mapapi_search, com.baidu.mapapi.search.FlutterBmfsearchPlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new com.baidu.mapapi.utils.FlutterBmfUtilsPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin flutter_baidu_mapapi_utils, com.baidu.mapapi.utils.FlutterBmfUtilsPlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new com.baidu.flutter_bmflocation.FlutterBmflocationPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin flutter_bmflocation, com.baidu.flutter_bmflocation.FlutterBmflocationPlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new io.flutter.plugins.flutter_plugin_android_lifecycle.FlutterAndroidLifecyclePlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin flutter_plugin_android_lifecycle, io.flutter.plugins.flutter_plugin_android_lifecycle.FlutterAndroidLifecyclePlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new com.baseflow.permissionhandler.PermissionHandlerPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin permission_handler, com.baseflow.permissionhandler.PermissionHandlerPlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new dev.fluttercommunity.plus.share.SharePlusPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin share_plus, dev.fluttercommunity.plus.share.SharePlusPlugin", e);
    }
    try {
      flutterEngine.getPlugins().add(new io.flutter.plugins.urllauncher.UrlLauncherPlugin());
    } catch(Exception e) {
      Log.e(TAG, "Error registering plugin url_launcher_android, io.flutter.plugins.urllauncher.UrlLauncherPlugin", e);
    }
  }
}

2.1.3 进入android\app\src\main\res\xml

没有这个文件的可以在res里面新建一个xml文件夹。

然后在xml里新建一个文件：network_security_config.xml，将下面的代码写进去就好了。

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

2.1.4 进入android\app\src\main\AndroidManifest.xml

注意：android\app\src\debug里也有AndroidManifest.xml，不要搞混。

需要修改的挺多的，注意name名要跟自己前面设置的Java文件名一致。

AndroidManifest.xml：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.baidu.flutter_bmfmap_example">
    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    
    // 将这段复制到自己文件的相应位置
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 获取网络状态，根据网络状态切换进行数据请求网络转换 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 写外置存储。如果开发者使用了离线地图，并且数据写在外置存储区域，则需要申请该权限 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- 读取外置存储。如果开发者使用了so动态加载功能并且把so文件放在了外置存储区域，则需要申请该权限，否则不需要 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <!-- 访问网络，进行地图相关业务数据请求，包括地图数据，路线规划，POI检索等 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- Demo弹窗需要 -->
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    // 
    
    <application 
        android:name="com.baidu.flutter_bmfmap_example.MyApplication"   //将name改成MyApplication，前面的包名改成自己的
        android:label="flutter_bmfmap_example"
        android:networkSecurityConfig="@xml/network_security_config"     // 复制这行代码到自己文件的相应位置
        android:icon="@mipmap/ic_launcher"> 
        
        //百度API_Key认证，需要自己去百度地图申请
        <meta-data
            android:name="com.baidu.lbsapi.API_KEY"
            android:value="请在此输入您在开放平台上申请的API_KEY" />
        //   
        
        <activity
            android:name="com.baidu.flutter_bmfmap_example.MapActivity"   //将name改成MapActivity，前面的包名改成自己的
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:exported="true"
            android:windowSoftInputMode="adjustResize"
            >
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

2.1.4 进入android\app\build.gradle

build.gradle

plugins {
    id "com.android.application"
    id "kotlin-android"
    id "dev.flutter.flutter-gradle-plugin"
}

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

android {
    namespace "com.dyl.mapdemo"
    compileSdkVersion flutter.compileSdkVersion
    ndkVersion flutter.ndkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.dyl.mapdemo"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
        minSdkVersion 20  // 修改最低sdk版本限制为20
        targetSdkVersion 31   // 修改为31
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"  //添加此行代码
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }

    //添加此段代码
    sourceSets {
        main {
            jniLibs.srcDirs 'jnilibs'
            manifest.srcFile 'src/main/AndroidManifest.xml'
        }
    }
    //添加此段代码
    packagingOptions{
        pickFirst 'lib/armeabi-v7a/libapp.so'
        pickFirst 'lib/armeabi/libapp.so'
        pickFirst 'lib/arm64-v8a/libapp.so'
        pickFirst 'lib/x86/libapp.so'
    }
}

flutter {
    source '../..'
}
  //添加此段代码
dependencies {
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    implementation fileTree(includes: ['*.jar'], dir: 'Libs')
    implementation 'androidx.localbroadcastmanager:localbroadcastmanager:1.0.0'
}

2.1.5 创建android\app\proguard-rules.pro

在app里面创建proguard-rules.pro，代码内容如下：

proguard-rules.pro：

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

2.2 新建mapdemo\files

在自己的项目里新建flies文件夹

在这里插入图片描述

flies文件夹里有两个文件

在这里插入图片描述

这两个文件不好复制，可以去官网下载demo，自己将这两个文件copy到自己的项目里。

2.2 新建mapdemo\resoures

同上，将demo里面的resoures文件夹直接copy到自己项目里就好了。

在这里插入图片描述

2.3 lib里新建文件

如下图，将demo里lib的文件全都copy到自己的lib里。main.dart里面直接替换即可。

注意：copy后会报错，因为包名改变，需要改成自己的包名。

在这里插入图片描述

import 'package:flutter_bmfmap_example/CustomWidgets/map_appbar.dart';

将flutter_bmfmap_example改成自己的包名就好了，比如我的是com.dyl.mapdemo。

改完这个之后可能还剩一个error，在map_appbar.dart里：

在这里插入图片描述

将：改成 = 即可。

2.4 修改test\widget_test.dart

widget_test.dart会有一个报错，将MyApp()前面的const删除即可。

在这里插入图片描述

2.5 配置pubspec.yaml

修改完pubspec.yaml要运行一下pub get，获取运行需要的包。在vscode里保存后会自动运行，稍事等待即可。

name: mapdemo
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: '>=3.1.0 <4.0.0'

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter
  
  //添加
  flutter_baidu_mapapi_map: ^3.4.1
  flutter_baidu_mapapi_utils: ^3.4.1
  flutter_baidu_mapapi_search: ^3.4.1
  flutter_bmflocation: ^3.4.1
  share_plus: ^2.0.4
  permission_handler: ^8.1.2
  
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  //添加
  assets:
    - resoures/
    - resoures/Model3D/
    - files/
    - resoures/bmflocaltileimage/16/
    - resoures/bmflocaltileimage/17/

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages