Flutter百度地图-重构项目

一、实现效果如下图

qq交流群:群号:730772561

1、地图中任意踩点进行杆塔和设备的新建,对与点和线进行关联

2、对于点和线进行各种操作。

请添加图片描述

3、自定义区域下载离线地图。

在这里插入图片描述

4…热烈线

5…自定义瓦片地图

6…热力地图等…地图动画等…多边形转换动画等

…很多慢慢来

如上图项目中有点线,
1.我们实现点和线。
2.对点和线进行连接。
3.设置点和线文字等。
…
到项目的我完成。

二、开始写项目

1、项目项目添加依赖。

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

2、获取然后设置清单文件的AK百度官方文档等。

3、可能很多的小伙伴会遇到如下错位置并且奔溃 “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下面配置如下代码解决问题

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

4、打开官方文档我们进行新App的开发旅程。

1.我们首先看看如何加载地图的

地图Flutter Widget构造，BMFMapWidget是地图Flutter插件封装的一个支持AndroidView和UiKitView的Widget。官方文档如下。

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

2、BMFMapOptions构造，BMFMapOptions包含了创建地图所需要的各种状态参数[显示样式,限制地图的显示范围,当前地图的中心点,地图的自定义最大最小比例尺级别…看官方文档


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

我们直接上代码

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

效果如下图

在这里插入图片描述
接下来我们进行基本的按钮和界面一样。
请添加图片描述

慢慢来待续
视频教学同步走

Flutter百度地图