Flutter百度地图集成插件flutter_baidu_mapapi_map的使用

Getting Started

flutter_baidu_mapapi_map 是一个用于在 Flutter 应用中集成百度地图的插件。它提供了丰富的地图功能，包括显示地图、添加标记、绘制路线等。

安装

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_baidu_mapapi_map: ^最新版本号

然后运行 flutter pub get 命令来安装依赖。

初始化

在使用百度地图插件之前，需要进行一些初始化操作，包括设置用户是否同意 SDK 隐私协议和初始化百度地图 SDK。

设置用户是否同意 SDK 隐私协议

import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';

BMFMapSDK.setAgreePrivacy(true);

初始化百度地图 SDK

根据平台的不同，初始化方式也有所不同。

iOS

if (Platform.isIOS) {
  BMFMapSDK.setApiKeyAndCoordType('请输入您的AK', BMF_COORD_TYPE.BD09LL);
}

Android

if (Platform.isAndroid) {
  await BMFAndroidVersion.initAndroidVersion();
  BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL);
}

注意：Android 平台上目前不支持通过接口设置 ApiKey，需要在主工程的 AndroidManifest.xml 文件中设置。具体配置方法请参考 百度地图官方文档。

获取原生地图版本号

Map? map = await BMFMapVersion.nativeMapVersion;
print('获取原生地图版本号：$map');

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中集成百度地图。

import 'dart:io' show Platform;

import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart'
    show BMFMapSDK, BMF_COORD_TYPE;
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_baidu_mapapi_map_example/CustomWidgets/map_appbar.dart';

import 'flutter_map_demo.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  /// 设置用户是否同意SDK隐私协议
  BMFMapSDK.setAgreePrivacy(true);

  // 百度地图sdk初始化鉴权
  if (Platform.isIOS) {
    BMFMapSDK.setApiKeyAndCoordType('请输入您的AK', BMF_COORD_TYPE.BD09LL);
  } else if (Platform.isAndroid) {
    /// 初始化获取Android 系统版本号
    await BMFAndroidVersion.initAndroidVersion();
    // Android 目前不支持接口设置Apikey,
    // 请在主工程的Manifest文件里设置，详细配置方法请参考官网(https://lbsyun.baidu.com/)demo
    BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL);
  }
  Map? map = await BMFMapVersion.nativeMapVersion;
  print('获取原生地图版本号：$map');
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: BMFAppBar(
          title: '百度地图flutter插件Demo',
          isBack: false,
        ),
        body: FlutterBMFMapDemo(),
      ),
    );
  }
}

使用示例

显示地图

在 flutter_map_demo.dart 文件中，定义一个显示地图的页面：

import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_baidu_mapapi_map_example/CustomWidgets/map_appbar.dart';

class FlutterBMFMapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BMFMapWidget(
      onBMFMapCreated: (controller) {
        controller.setMapStatus(
          BMFMapStatus(
            zoom: 15,
            target: BMFCoordinate(39.917215, 116.380349),
          ),
        );
      },
      mapOptions: BMFMapOptions(
        center: BMFCoordinate(39.917215, 116.380349),
        zoomLevel: 15,
      ),
    );
  }
}

运行应用

完成上述步骤后，运行你的 Flutter 应用，你应该能够看到一个显示百度地图的页面。

参考文档

更多关于 flutter_baidu_mapapi_map 插件的详细信息和高级用法，请参考 百度地图官方文档 和 插件文档。

希望这些信息对你有所帮助！如果有任何问题，欢迎随时提问。