Flutter教程调用百度地图API的实战案例

我正在学习Flutter开发，想集成百度地图API实现地图功能，但遇到几个问题：1) 官方文档提到的flutter_bmflocation插件安装后报依赖冲突，该怎么解决？2) 如何正确配置Android和iOS端的百度地图API密钥？3) 能否提供一个完整的示例代码，展示地图初始化、定位标注和路线规划的实现？4) 在模拟器上调试时地图显示黑屏是什么原因？希望有实际项目经验的大神能分享下具体步骤和避坑技巧。

3 回复

以下是一个简单的Flutter调用百度地图API的实战案例：

  1. 注册百度地图API：首先，前往百度地图开放平台注册账号，创建应用并获取ak密钥。

  2. 添加依赖： 在pubspec.yaml中加入flutter_baidu_mapapi：

    dependencies:
  flutter_baidu_mapapi: ^1.0.0

  3. 代码实现：

    • 初始化百度地图：
      import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi/map/flutter_baidu_mapapi_map.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await BMapInit('你的百度地图AK');
  runApp(MyApp());
}

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('百度地图示例')),
      body: BMFMapView(
        onBMFMapCreated: (controller) {},
      ),
    );
  }
}

  4. 功能扩展：可进一步添加标注、点击事件等交互功能。

通过上述步骤，即可在Flutter项目中成功集成百度地图。

更多关于Flutter教程调用百度地图API的实战案例的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


以下是一个简单的Flutter实战案例，展示如何调用百度地图API：

  1. 注册百度地图API：首先，在百度地图开放平台注册并获取ak密钥。

  2. 添加依赖： 在pubspec.yaml中添加flutter_baidu_map插件：

    dependencies:
  flutter_baidu_map: ^latest_version

  3. 配置Android和iOS：确保在AndroidManifest.xml和Info.plist中正确配置API密钥。

  4. 编写代码：

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

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

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

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  final BaiduMapController? controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('百度地图示例')),
      body: BaiduMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(39.9096, 116.3972), // 北京坐标
          zoom: 15,
        ),
        onMapCreated: (controller) {
          this.controller = controller;
          controller?.setMapStatus(MapStatus(zoom: 15));
        },
        mapType: MapType.Standard,
      ),
    );
  }
}

此代码展示了如何初始化百度地图，并设置初始位置为北京天安门。运行后即可看到地图界面。

Flutter调用百度地图API实战案例

准备工作

  1. 注册百度开发者账号并申请地图API密钥
  2. 在项目中添加百度地图Flutter插件
dependencies:
  flutter_baidu_mapapi_base: ^3.0.0
  flutter_baidu_mapapi_map: ^3.0.0

基本地图实现

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 BaiduMapPage extends StatefulWidget {
  @override
  _BaiduMapPageState createState() => _BaiduMapPageState();
}

class _BaiduMapPageState extends State<BaiduMapPage> {
  late BMFMapController _controller;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('百度地图')),
      body: BMFMapWidget(
        onBMFMapCreated: (controller) {
          _controller = controller;
          // 设置地图中心点
          _controller.setCenterCoordinate(
            BMFCoordinate(39.917215, 116.380341),
            animated: true
          );
          // 设置缩放级别
          _controller.setZoomLevel(14);
        },
        mapOptions: BMFMapOptions(
          center: BMFCoordinate(39.917215, 116.380341),
          zoomLevel: 14,
          mapType: BMFMapType.Standard,
          showZoomControl: true,
        ),
      ),
    );
  }
}

添加标记点

void addMarker() {
  BMFMarker marker = BMFMarker(
    position: BMFCoordinate(39.917215, 116.380341),
    title: '天安门',
    icon: 'assets/marker.png', // 自定义图标
  );
  
  _controller.addMarker(marker);
}

定位功能实现

void locateUser() async {
  Location location = await Location().getLocation();
  _controller.setCenterCoordinate(
    BMFCoordinate(location.latitude, location.longitude),
    animated: true
  );
  
  // 添加定位标记
  addMarkerAt(location.latitude, location.longitude, '我的位置');
}

注意事项

  1. 确保在AndroidManifest.xml和Info.plist中添加百度地图的AppKey
  2. 根据需要申请相应的权限（如定位权限）
  3. 百度地图SDK对Flutter的支持可能会更新，建议查看官方最新文档

这个案例涵盖了基本的地图显示、标记点添加和定位功能，你可以根据需要扩展路线规划、POI搜索等功能。

回到顶部