Flutter集成百度地图

发表于2022-03-29

1.引入依赖

1
2
flutter_bmfmap: ^1.0.2
flutter_bmfutils: ^1.0.2

获取秘钥

安卓获取参考文档

配置

在安卓目录AndroidManifest.xml文件中，配置权限与上一步获取的AK

1
2
3
4
5
6
7
<uses-permission android:name="android.permission.WAKE_LOCK"></uses-permission>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 获取网络状态，根据网络状态切换进行数据请求网络转换 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 访问网络，进行地图相关业务数据请求，包括地图数据，路线规划，POI检索等 -->
    <uses-permission android:name="android.permission.INTERNET" />
1
2
3
<meta-data
            android:name="com.baidu.lbsapi.API_KEY"
            android:value="VGtYqXAMquUFPbx0fk1oZhviGlQTMYcI" />

创建地图容器

  • 新建一个自定义的Application，继承BmfMapApplication类重写onCreate方法，在onCreate方法中执行父类的super.onCreate()， 完成SDK的初始化

    1
    2
    3
    4
    5
    6
    7
    public class MyApplication extends BmfMapApplication {

        @Override
        public void onCreate() {
            super.onCreate();
        }
    }

  • 在AndroidManifest.xml文件中声明该Application:

  • 在main.dart中配置ios环境下的百度AK

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    void main() {
      // 百度地图sdk初始化鉴权
      if (Platform.isIOS) {
        BMFMapSDK.setApiKeyAndCoordType(
            'VGtYqXAMquUFPbx0fk1oZhviGlQTMYcI', BMF_COORD_TYPE.BD09LL);
      } else if (Platform.isAndroid) {
        // Android 目前不支持接口设置Apikey,
        // 请在主工程的Manifest文件里设置，详细配置方法请参考官网(https://lbsyun.baidu.com/)demo
        BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL);
      }
      runApp(MyApp());
    }

  • 创建basic_map.dart地图容器组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import 'package:flutter/material.dart';
import 'package:flutter_bmfmap/BaiduMap/bmfmap_map.dart';
import 'package:flutter_bmfbase/BaiduMap/bmfmap_base.dart';

class BasicMap extends StatefulWidget {
  @override
  _BasicMapState createState() => _BasicMapState();
}

class _BasicMapState extends State<BasicMap> {
  Size screenSize;
  BMFMapOptions mapOptions;
  BMFMapController myMapController;

  @override
  void initState() {
    super.initState();
    mapOptions = BMFMapOptions(
        center: BMFCoordinate(34.263161, 108.948024),
        zoomLevel: 12,
        mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0));
  }


  /// 创建完成回调
  void onBMFMapCreated(BMFMapController controller) {
    myMapController = controller;

    /// 地图加载回调
    myMapController?.setMapDidLoadCallback(callback: () {
      print('mapDidLoad-地图加载完成');
    });
  }

  @override
  Widget build(BuildContext context) {
    screenSize = MediaQuery.of(context).size;
    return Container(
      height: screenSize.height,
      width: screenSize.width,
      child: BMFMapWidget(
        onBMFMapCreated: (controller) {
          onBMFMapCreated(controller);
        },
        mapOptions: mapOptions,
      ),
    );
  }
}
  • 引入自定义创建的地图容器组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BasicMap(),
    );
  }
}

运行测试

参考文档

  1. 百度地图官网Flutter插件文档
  2. 示例demo下载