Flutter集成百度地图

1.引入依赖

  flutter_bmfmap: ^1.0.2
  flutter_bmfutils: ^1.0.2

获取秘钥

安卓获取参考文档

配置

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

<uses-permission android:name="android.permission.WAKE_LOCK"></uses-permission>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 获取网络状态，根据网络状态切换进行数据请求网络转换 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 访问网络，进行地图相关业务数据请求，包括地图数据，路线规划，POI检索等 -->
    <uses-permission android:name="android.permission.INTERNET" />

<meta-data
            android:name="com.baidu.lbsapi.API_KEY"
            android:value="VGtYqXAMquUFPbx0fk1oZhviGlQTMYcI" />

创建地图容器

• 新建一个自定义的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<BasicMap> {
  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下载