Flutter百度地图搜索功能插件flutter_baidu_mapapi_search的使用

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

Flutter百度地图搜索功能插件 flutter_baidu_mapapi_search 的使用

概述

flutter_baidu_mapapi_search 是一个用于在Flutter应用中集成百度地图搜索功能的插件。它提供了丰富的API接口,支持POI搜索、路线规划等操作。

开始使用

前置准备

  1. 获取百度地图API Key: 首先需要到百度地图开放平台注册账号并创建应用以获取API Key。
  2. 添加依赖: 在项目的pubspec.yaml文件中添加如下依赖:
dependencies:
  flutter_baidu_mapapi_base: ^latest_version
  flutter_baidu_mapapi_search: ^latest_version

记得将^latest_version替换为最新版本号。

  1. 初始化SDK: 在应用启动时初始化百度地图SDK,并设置隐私协议同意状态。

示例代码

以下是一个完整的示例Demo,展示了如何在Flutter应用中使用flutter_baidu_mapapi_search进行基本的地图搜索操作。

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_search/flutter_baidu_mapapi_search.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 BMFMapSearchVersion.nativeSearchVersion;
    print('获取原生地图版本号:$map');
  } else if (Platform.isAndroid) {
    // Android 目前不支持接口设置Apikey,
    // 请在主工程的Manifest文件里设置,详细配置方法请参考官网(https://lbsyun.baidu.com/)demo
    BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL);
  }

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

// 示例搜索页面
class BMFMapSearchDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () async {
          // 创建POI搜索实例
          BMFPoiSearch poiSearch = BMFPoiSearch();

          // 设置POI搜索监听器
          poiSearch.onGetPoiSearchResult(
              callback: (BMFPoiSearchResult result, BMFSearchErrorCode errorCode) {
            if (errorCode == BMFSearchErrorCode.NO_ERROR) {
              print('搜索成功:${result.poiInfoList}');
            } else {
              print('搜索失败:$errorCode');
            }
          });

          // 发起POI关键词搜索
          bool flag = await poiSearch.poiKeywordSearch(
              BMFPoiKeywordSearchOption(
                  location: BMFCoordinate(39.917256, 116.3804),
                  keyword: "餐厅",
                  city: "北京"));
          if (!flag) {
            print("搜索参数错误");
          }
        },
        child: Text('搜索附近的餐厅'),
      ),
    );
  }
}

这个示例展示了如何通过关键词“餐厅”在北京范围内进行POI搜索。你可以根据实际需求修改搜索条件和逻辑。


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

1 回复

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


当然,下面是一个关于如何使用 flutter_baidu_mapapi_search 插件在 Flutter 应用中实现百度地图搜索功能的示例代码。这个插件提供了多种搜索功能,比如地点搜索、POI搜索等。

首先,确保你已经在你的 pubspec.yaml 文件中添加了 flutter_baidu_mapapi_search 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_baidu_mapapi_search: ^最新版本号  # 请替换为最新版本号

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

接下来,你需要在 Android 和 iOS 项目中分别配置百度地图的 API Key。具体步骤可以参考插件的官方文档。

以下是一个简单的 Flutter 应用示例,展示了如何使用 flutter_baidu_mapapi_search 插件进行地点搜索:

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

void main() {
  // 初始化 SDK
  BMapApiComponent.init(yourApiKey: "你的百度API Key")
      .then((_) => runApp(MyApp()))
      .catchError((e) => print(e));
}

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

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  late PlaceSearchOption _searchOption;
  late List<BMPoiResult> _poiResults = [];

  @override
  void initState() {
    super.initState();
    _searchOption = PlaceSearchOption()
      ..keyword = "餐馆"
      ..city = "北京"
      ..pageIndex = 0
      ..pageSize = 10;
  }

  void _onSearch() async {
    try {
      var result = await BMapPlaceSearchApi.placeSearch(_searchOption);
      if (result.status == BMapSearchStatus.success && result.poiList != null) {
        setState(() {
          _poiResults = result.poiList!;
        });
      } else {
        print("搜索失败: ${result.errorMsg}");
      }
    } catch (e) {
      print("搜索异常: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("百度地图搜索示例"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(
                labelText: "搜索关键词",
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: _onSearch,
                ),
              ),
              onChanged: (value) {
                setState(() {
                  _searchOption = _searchOption.copyWith(keyword: value);
                });
              },
            ),
            SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: _poiResults.length,
                itemBuilder: (context, index) {
                  var poi = _poiResults[index];
                  return ListTile(
                    title: Text(poi.name),
                    subtitle: Text("${poi.address}  ${poi.distance}米"),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项:

  1. API Key:确保你已经在百度开发者平台申请了一个 API Key,并将其替换到 yourApiKey: "你的百度API Key"
  2. 权限配置:在 Android 和 iOS 项目中正确配置权限和 API Key。
  3. 错误处理:实际应用中应添加更多的错误处理和用户提示。

这个示例代码展示了如何使用 flutter_baidu_mapapi_search 插件进行地点搜索,并将搜索结果以列表形式展示在界面上。你可以根据实际需求进一步扩展和修改这个示例。

回到顶部