Flutter百度地圖-重構項目

1、實現效果以下圖

qq交流羣:羣號:730772561

一、地圖中任意踩點進行杆塔和設備的新建,對與點和線進行關聯

二、對於點和線進行各類操做。

三、自定義區域下載離線地圖。

4…熱烈線

5…自定義瓦片地圖

6…熱力地圖等…地圖動畫等…多邊形轉換動畫等

…不少慢慢來php

如上圖項目中有點線,
1.咱們實現點和線。
2.對點和線進行鏈接。
3.設置點和線文字等。
…
到項目的我完成。

android

2、開始寫項目

一、項目項目添加依賴。

.yaml下面添加
flutter_bmfmap: ^1.0.1
flutter_bmfutils: ^1.0.1

app

二、獲取而後設置清單文件的AK百度官方文檔等。

三、可能不少的小夥伴會遇到以下錯位置而且奔潰「android/platform_view_android_jni.cc」

//Flutter運行出現下面提示
android/platform_view_android_jni.cc     
//原生環境運行出現下面。
SDKInitializer.initialize(getApplicationContext())......

這裏咱們須要初始化MyApplication而且繼承BmfMapApplication看了分裝源碼的就會知道。
   在BmfMapApplication裏面進行了SDK的初始化init操做。在集成過程當中遇到的問題。
 在原生Android main下面進行繼承

class MyApplication : BmfMapApplication() {

}

且在AndroidMmanifest.xml下面配置以下代碼解決問題ide

<application
        android:name=".MyApplication"///這裏去引用MyApplication進行初始化SDK
        android:label="flutterosm"
        android:icon="@mipmap/ic_launcher">

四、打開官方文檔咱們進行新App的開發旅程。

1.咱們首先看看如何加載地圖的

地圖Flutter Widget構造，BMFMapWidget是地圖Flutter插件封裝的一個支持AndroidView和UiKitView的Widget。官方文檔以下。動畫

Container(
      height: screenSize.height,
      width: screenSize.width,
      child: BMFMapWidget(
        onBMFMapCreated: (controller) {
            
        },
        mapOptions: mapOptions,
      ),
    );

二、BMFMapOptions構造，BMFMapOptions包含了建立地圖所須要的各類狀態參數[顯示樣式,限制地圖的顯示範圍,當前地圖的中心點,地圖的自定義最大最小比例尺級別…看官方文檔

BMFMapOptions mapOptions = BMFMapOptions(
        center: BMFCoordinate(39.917215, 116.380341),
        zoomLevel: 12,
        mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0));

咱們直接上代碼ui

import 'dart:io' show Platform;
import 'package:flutter/material.dart';
import 'package:flutter_bmfbase/BaiduMap/bmfmap_base.dart' show BMFMapSDK, BMF_COORD_TYPE;
import 'package:flutter_bmfbase/BaiduMap/bmfmap_base.dart';
import 'package:flutter_bmfmap/BaiduMap/bmfmap_map.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 百度地圖sdk初始化鑑權
  if (Platform.isIOS) {
    BMFMapSDK.setApiKeyAndCoordType(
        '請在此輸入您在開放平臺上申請的API_KEY', BMF_COORD_TYPE.BD09LL);
  } 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> {
  BMFMapOptions mapOptions;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar:AppBar(
          title:Text('百度地圖flutter插件Demo'),
        ),
        body: BMFMapWidget(
          onBMFMapCreated: (controller) {

          },
          mapOptions: mapOptions,
        ),
      ),
    );
  }
}

效果以下圖

接下來咱們進行基本的按鈕和界面同樣。

url

慢慢來待續
視頻教學同步走
spa

Flutter百度地圖