Flutter百度地图工具插件flutter_baidu_mapapi_utils的使用

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

flutter_baidu_mapapi_utils 使用指南

flutter_baidu_mapapi_utils 是一个用于在 Flutter 应用中集成百度地图工具的插件。该插件提供了平台特定的实现代码,适用于 Android 和 iOS 平台。

快速入门

要开始使用 flutter_baidu_mapapi_utils 插件,请按照以下步骤进行操作:

1. 初始化设置

首先,在你的项目中引入必要的包,并初始化百度地图 SDK。

示例代码

import 'dart:io' show Platform;
import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';
import 'package:flutter_baidu_mapapi_utils/flutter_baidu_mapapi_utils.dart';

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

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

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

  runApp(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: Text('百度地图flutter插件Demo'),
        ),
        body: FlutterBMFMapDemo(),
      ),
    );
  }
}

2. 创建自定义小部件和地图演示

接下来,创建一些自定义的小部件来展示地图功能。

自定义小部件示例

import 'package:flutter/material.dart';

class BMFAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final bool isBack;

  BMFAppBar({required this.title, required this.isBack});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      leading: isBack ? IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        },
      ) : null,
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

3. 地图演示页面

创建一个地图演示页面来展示地图的基本功能。

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

class FlutterBMFMapDemo extends StatefulWidget {
  @override
  _FlutterBMFMapDemoState createState() => _FlutterBMFMapDemoState();
}

class _FlutterBMFMapDemoState extends State<FlutterBMFMapDemo> {
  late BMFMapController myMapController;

  @override
  Widget build(BuildContext context) {
    return BMFMapWidget(
      onBMFMapCreated: (controller) {
        myMapController = controller;
        myMapController.showUserLocation(true);
      },
      mapOptions: BMFMapOptions(
        center: BMFCoordinate(39.917215, 116.380341), // 北京天安门坐标
        zoomLevel: 12,
      ),
    );
  }
}

结论

通过上述步骤,您可以轻松地在 Flutter 应用中集成百度地图工具插件 flutter_baidu_mapapi_utils。确保您已经正确设置了 API Key 和其他必要的配置,以便应用能够正常访问百度地图服务。


这段 Markdown 文档提供了一个完整的示例 demo,展示了如何在 Flutter 应用中集成和使用 `flutter_baidu_mapapi_utils` 插件。希望这对您有所帮助!

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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用flutter_baidu_mapapi_utils插件的示例代码。这个插件提供了一些实用的工具类,用于处理百度地图API的相关功能。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加flutter_baidu_mapapi_utils依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_baidu_mapapi_utils: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

2. 配置百度地图API Key

android/app/src/main/AndroidManifest.xml中添加你的百度地图API Key:

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

ios/Runner/Info.plist中添加相同的API Key(如果需要iOS支持):

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

3. 使用插件

下面是一个简单的示例,展示如何使用flutter_baidu_mapapi_utils插件进行地理编码(将地址转换为经纬度)和逆地理编码(将经纬度转换为地址)。

地理编码示例

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

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

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

class _MyAppState extends State<MyApp> {
  String result = '';

  void _geoCode() async {
    try {
      String address = "北京市海淀区上地十街10号";
      GeoCodeResult geoCodeResult = await BaiduMapUtils.geoCode(address);
      setState(() {
        result = 'Latitude: ${geoCodeResult.location?.latitude}, Longitude: ${geoCodeResult.location?.longitude}';
      });
    } catch (e) {
      setState(() {
        result = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Geo Coding Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(result),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _geoCode,
                child: Text('Geo Code'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

逆地理编码示例

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

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

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

class _MyAppState extends State<MyApp> {
  String result = '';

  void _reverseGeoCode() async {
    try {
      double latitude = 39.984154;
      double longitude = 116.318516;
      ReverseGeoCodeResult reverseGeoCodeResult = await BaiduMapUtils.reverseGeoCode(latitude, longitude);
      setState(() {
        result = reverseGeoCodeResult.result?.address;
      });
    } catch (e) {
      setState(() {
        result = 'Error: $e';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reverse Geo Coding Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(result),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _reverseGeoCode,
                child: Text('Reverse Geo Code'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项

  1. 确保你的百度地图API Key是有效的,并且已经开启了相应的服务权限。
  2. 由于网络请求等原因,调用这些API时可能会遇到错误,因此建议添加适当的错误处理逻辑。
  3. 插件的具体API和返回类型可能会随着版本更新而变化,请参考最新的官方文档进行了解。

希望这些示例代码能帮助你快速上手flutter_baidu_mapapi_utils插件!

回到顶部