Flutter集成百度地图

1.引入依赖

  flutter_bmfmap: ^1.0.2
  flutter_bmfutils: ^1.0.2

获取秘钥

安卓获取参考文档

配置

在安卓目录AndroidManifest.xml文件中,配置权限与上一步获取的AK


    
    
    
    
    
    

创建地图容器

  • 新建一个自定义的Application,继承BmfMapApplication类重写onCreate方法,在onCreate方法中执行父类的super.onCreate(), 完成SDK的初始化
public class MyApplication extends BmfMapApplication {

    @Override
    public void onCreate() {
        super.onCreate();
    }
}
  • AndroidManifest.xml文件中声明该Application:

  • main.dart中配置ios环境下的百度AK

void main() {
  // 百度地图sdk初始化鉴权
  if (Platform.isIOS) {
    BMFMapSDK.setApiKeyAndCoordType(
        'VGtYqXAMquUFPbx0fk1oZhviGlQTMYcI', BMF_COORD_TYPE.BD09LL);
  } else if (Platform.isAndroid) {
    // Android 目前不支持接口设置Apikey,
    // 请在主工程的Manifest文件里设置,详细配置方法请参考官网(https://lbsyun.baidu.com/)demo
    BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL);
  }
  runApp(MyApp());
}
  • 创建basic_map.dart地图容器组件
import 'package:flutter/material.dart';
import 'package:flutter_bmfmap/BaiduMap/bmfmap_map.dart';
import 'package:flutter_bmfbase/BaiduMap/bmfmap_base.dart';

class BasicMap extends StatefulWidget {
  @override
  _BasicMapState createState() => _BasicMapState();
}

class _BasicMapState extends State {
  Size screenSize;
  BMFMapOptions mapOptions;
  BMFMapController myMapController;

  @override
  void initState() {
    super.initState();
    mapOptions = BMFMapOptions(
        center: BMFCoordinate(34.263161, 108.948024),
        zoomLevel: 12,
        mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0));
  }


  /// 创建完成回调
  void onBMFMapCreated(BMFMapController controller) {
    myMapController = controller;

    /// 地图加载回调
    myMapController?.setMapDidLoadCallback(callback: () {
      print('mapDidLoad-地图加载完成');
    });
  }

  @override
  Widget build(BuildContext context) {
    screenSize = MediaQuery.of(context).size;
    return Container(
      height: screenSize.height,
      width: screenSize.width,
      child: BMFMapWidget(
        onBMFMapCreated: (controller) {
          onBMFMapCreated(controller);
        },
        mapOptions: mapOptions,
      ),
    );
  }
}
  • 引入自定义创建的地图容器组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BasicMap(),
    );
  }
}

运行测试

参考文档

  1. 百度地图官网Flutter插件文档
  2. 示例demo下载

你可能感兴趣的:(Flutter集成百度地图)