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