Flutter集成百度地圖

1.引入依賴

  flutter_bmfmap: ^1.0.2
  flutter_bmfutils: ^1.0.2

獲取秘鑰

安卓獲取參考文檔

配置

在安卓目錄AndroidManifest.xml文件中坤溃，配置權(quán)限與上一步獲取的AK

<uses-permission android:name="android.permission.WAKE_LOCK"></uses-permission>
    <!-- 用于訪問wifi網(wǎng)絡(luò)信息，wifi信息會用于進(jìn)行網(wǎng)絡(luò)定位 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- 獲取網(wǎng)絡(luò)狀態(tài)暇矫，根據(jù)網(wǎng)絡(luò)狀態(tài)切換進(jìn)行數(shù)據(jù)請求網(wǎng)絡(luò)轉(zhuǎn)換 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- 訪問網(wǎng)絡(luò)，進(jìn)行地圖相關(guān)業(yè)務(wù)數(shù)據(jù)請求级乐，包括地圖數(shù)據(jù)兽愤，路線規(guī)劃于样，POI檢索等 -->
    <uses-permission android:name="android.permission.INTERNET" />

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

創(chuàng)建地圖容器

新建一個(gè)自定義的Application抡爹，繼承BmfMapApplication類重寫onCreate方法辛馆，在onCreate方法中執(zhí)行父類的super.onCreate()，完成SDK的初始化

public class MyApplication extends BmfMapApplication {

    @Override
    public void onCreate() {
        super.onCreate();
    }
}

在AndroidManifest.xml文件中聲明該Application:
在main.dart中配置ios環(huán)境下的百度AK

void main() {
  // 百度地圖sdk初始化鑒權(quán)
  if (Platform.isIOS) {
    BMFMapSDK.setApiKeyAndCoordType(
        'VGtYqXAMquUFPbx0fk1oZhviGlQTMYcI', BMF_COORD_TYPE.BD09LL);
  } else if (Platform.isAndroid) {
    // Android 目前不支持接口設(shè)置Apikey,
    // 請?jiān)谥鞴こ痰腗anifest文件里設(shè)置豁延，詳細(xì)配置方法請參考官網(wǎng)(https://lbsyun.baidu.com/)demo
    BMFMapSDK.setCoordType(BMF_COORD_TYPE.BD09LL);
  }
  runApp(MyApp());
}

創(chuàng)建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));
  }


  /// 創(chuàng)建完成回調(diào)
  void onBMFMapCreated(BMFMapController controller) {
    myMapController = controller;

    /// 地圖加載回調(diào)
    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,
      ),
    );
  }
}

引入自定義創(chuàng)建的地圖容器組件

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(),
    );
  }
}

運(yùn)行測試

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者