Flutter百度地图基础功能插件flutter_baidu_mapapi_base的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter百度地图基础功能插件flutter_baidu_mapapi_base的使用

百度地图Flutter插件flutter_baidu_mapapi_base提供了在Flutter应用中集成百度地图的基础功能。本文将介绍如何使用该插件，并提供一个完整的示例Demo。

Getting Started

此项目是一个Flutter插件包的起点，包含Android和/或iOS平台特定的实现代码。要开始使用Flutter，请查看我们的在线文档，其中包括教程、示例、移动开发指南和完整的API参考。

初始化设置

在使用flutter_baidu_mapapi_base之前，需要进行一些初始化设置，包括同意SDK隐私协议和设置API密钥等。

示例代码

以下是完整的示例代码，展示了如何初始化百度地图SDK并获取原生地图版本号：

import 'dart:io' show Platform;
import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.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 目前不支持接口设置Apikey,
    // 请在主工程的Manifest文件里设置，详细配置方法请参考官网(https://lbsyun.baidu.com/)demo
    BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL);
  }

  Map? map = await BMFMapBaseVersion.nativeBaseVersion;
  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: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('flutter_baidu_mapapi_base \n'),
        ),
      ),
    );
  }
}

详细步骤

  1. 导入依赖： 在pubspec.yaml文件中添加flutter_baidu_mapapi_base依赖：

    dependencies:
  flutter:
    sdk: flutter
  flutter_baidu_mapapi_base: ^最新版本号

  2. 初始化SDK： 在main()函数中调用BMFMapSDK.setAgreePrivacy(true)来同意隐私协议，并根据平台设置API密钥和坐标类型。

  3. 运行应用： 使用runApp(MyApp())启动应用，并在控制台输出原生地图版本号。

  4. Android配置： 对于Android平台，需要在AndroidManifest.xml中手动配置API密钥。具体步骤请参考百度地图官方文档。

  5. iOS配置： 对于iOS平台，可以在代码中直接设置API密钥和坐标类型。

通过以上步骤，您就可以在Flutter应用中成功集成百度地图基础功能插件flutter_baidu_mapapi_base了。希望这个示例能帮助您快速上手使用该插件。如果有任何问题或疑问，欢迎留言讨论。


更多关于Flutter百度地图基础功能插件flutter_baidu_mapapi_base的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter百度地图基础功能插件flutter_baidu_mapapi_base的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用Flutter百度地图基础功能插件flutter_baidu_mapapi_base的代码案例。这个插件允许你在Flutter应用中集成并显示百度地图。

首先，确保你已经在你的pubspec.yaml文件中添加了flutter_baidu_mapapi_base依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_baidu_mapapi_base: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，你需要在Android和iOS项目中配置百度地图的API Key。对于Android，你需要在android/app/src/main/AndroidManifest.xml中添加API Key：

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

对于iOS，你需要在ios/Runner/Info.plist中添加API Key：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>BAIDU_MAP_API_KEY</key>
<string>你的百度地图API_KEY</string>

确保替换你的百度地图API_KEY为你的实际API Key。

以下是一个简单的Flutter应用代码示例，展示了如何使用flutter_baidu_mapapi_base插件来显示百度地图：

import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BaiduMapScreen(),
    );
  }
}

class BaiduMapScreen extends StatefulWidget {
  @override
  _BaiduMapScreenState createState() => _BaiduMapScreenState();
}

class _BaiduMapScreenState extends State<BaiduMapScreen> {
  late BMFMapController _mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 百度地图示例'),
      ),
      body: Stack(
        children: <Widget>[
          BMFMapWidget(
            onMapCreated: _onMapCreated,
            options: BMFMapOptions(
              center: BMFCoordinate(latitude: 39.9042, longitude: 116.4074), // 北京天安门坐标
              zoomLevel: 15,
            ),
          ),
        ],
      ),
    );
  }

  void _onMapCreated(BMFMapController controller) {
    setState(() {
      _mapController = controller;
    });
    // 可以在这里添加其他地图操作，比如添加标记等
  }
}

在这个示例中：

  1. BMFMapWidget是显示百度地图的widget。
  2. onMapCreated回调在地图创建完成后被调用，你可以在这里保存BMFMapController实例，以便后续进行地图操作。
  3. BMFMapOptions用于配置地图的初始状态，比如中心点和缩放级别。

这个示例展示了如何在Flutter应用中集成百度地图并显示一个简单的地图视图。你可以根据需要进一步扩展功能，比如添加标记、覆盖物、路线规划等。更多高级功能可以参考flutter_baidu_mapapi_base插件的官方文档。

回到顶部