百度地图_Flutter插件

百度地图_Flutter插件
显示3D地图、个性化地图(改变地图个元素颜色)、绘制3D模型。

百度地图创建应用与获取appkey(ios和andriod分别获取appkey)

1、iOS注册和获取密钥
注意:填写对应工程的安全码Bundle Identifier。
2、andriod注册和获取密钥
注意:填写对应工程的包名。
在app目录下的build.gradle文件中找到applicationId,并确保其值与AndroidManifest.xml中定义的package相同。
使用Android Studio开发,如遇到applicationId 与package不一致的情况,以appclicationid为准。
注意:获取SHA1
调试版本(debug)和发布版本(release)下的 SHA1 值是不同的,发布 apk 时需要根据发布 apk 对应的 keystore 重新配置 Key。

Flutter开发环境配置

pubspec.yaml文件中添加插件

dependencies:
  flutter:
    sdk: flutter

  # 权限管理插件
  permission_handler: ^9.2.0
  # 基础地图:
  flutter_baidu_mapapi_map: ^3.1.0+1
  # 检索:
  flutter_baidu_mapapi_search: ^3.1.0
  # 计算工具:
  flutter_baidu_mapapi_utils: ^3.1.0+1

添加地图,设置3D地图属性

 /// 创建地图
  Container generateMap() {
    return Container(
      height: screenSize.height,
      width: screenSize.width,
      child: BMFMapWidget(
        onBMFMapCreated: (controller) {
          onBMFMapCreated(controller);
        },
        mapOptions: initMapOptions(),
      ),
    );
  }
  /// 地图创建完成回调
  void onBMFMapCreated(BMFMapController controller) {
    mapController = controller;
    mapController?.setMapDidLoadCallback(callback: () {
      _mapCustomMapStyle(); //设置个性化地图背景色
      print('mapDidLoad-地图加载完成!!!');
    }); // 地图加载完成回调
  }
  /// 设置地图参数
  BMFMapOptions initMapOptions() {
    BMFMapOptions mapOptions = BMFMapOptions(
      center: BMFCoordinate(39.94, 116.41),
      mapType: BMFMapType.Standard,
      zoomLevel: 14,
      maxZoomLevel: 21,
      minZoomLevel: 4,
      logoPosition: BMFLogoPosition.LeftBottom,
      mapPadding: BMFEdgeInsets(top: 0, left: 50, right: 50, bottom: 0),
      changeCenterWithDoubleTouchPointEnabled:true,
      overlookEnabled: true,
      overlooking: -45,
      buildingsEnabled: false, // 3D建筑效果
      gesturesEnabled:true ,
      scrollEnabled:true ,
      zoomEnabled: true ,
      rotateEnabled :true,
      compassEnabled: true,
      compassPosition :BMFPoint(10,200) ,
      showMapScaleBar: true,
      showMapPoi: true,
    );
    return mapOptions;
  }

个性化地图控制台设置方法

——1.选择模版/编辑个性化地图
——2.控制台导出.json文件路径/样式ID
——3.代码添加个性化地图

 /// 设置个性化地图样式
  //方式1:本地文件
  void _mapCustomMapStyle() {
    mapController?.setCustomMapStyle('files/custom_map_config.sty', 0);
    mapController?.setCustomMapStyleEnable(true);
  }

 // 方式2::根据个性化样式ID
 BMFCustomMapStyleOption customMapStyleOption = BMFCustomMapStyleOption(
      customMapStyleID: "ab0e0251e4e768a96dffde39e0034b12");
 myMapController?.setCustomMapStyleWithOptionPath(
     customMapStyleOption: styleOption(),
     preload: (String path) {
       print('preload');
     },
     success: (String path) {
       print('success');
     },
     error: (int errorCode, String path) {
       print('error');
     });

绘制3D柱状图

/// 构造3d棱柱
void _add3DModelOverlay(BMFCoordinate coordinate) {
      BMFCoordinate(23.1007758, 113.5056175),
      BMFCoordinate(23.1007452, 113.5056388),
      BMFCoordinate(23.1007892, 113.505714),
      BMFCoordinate(23.1008206, 113.5056922),
];

_prismOverlay = BMFPrismOverlay.colorPrismOverlay(
coordinates: coords,
topFaceColor: Colors.green,
sideFaceColor: Colors.red,
height: 20);
myMapController.addPrismOverlay(_prismOverlay);
  }

3D模型格式要求

Since 3.1.0 起地图Flutter插件支持3D模型(BMF3DModelOverlay)绘制,用于在地图上展示3D模型,目前支持obj+mtl文件格式模型加载。
注意: flutter添加文件资源,要在pubspec.yaml文件中添加文件夹。

  # To add assets to your application, add an assets section, like this:
  assets:
    - files/
    - files/Model3D/
/// 构造3d模型
  void _add3DModelOverlay(BMFCoordinate coordinate) {
  BMF3DModelOption option = BMF3DModelOption(
      modelPath: 'files/Model3D',
      modelName: 'among_us',
      zoomFixed: true,
      scale: 0.5);
  BMF3DModelOverlay _modelOverlay = BMF3DModelOverlay(
  center: coordinate, option: option);
  mapController?.add3dModelOverlay(_modelOverlay);
  current3DModelOverlayList.add(_modelOverlay);
  print(current3DModelOverlayList);
  }

demo可下载

地图其他功能

定位Flutter插件:flutter_bmflocation: ^3.1.0
地图Flutter插件
基础地图:flutter_baidu_mapapi_map: ^3.1.0+1
检索:fflutter_baidu_mapapi_search: ^3.1.0
计算工具:flutter_baidu_mapapi_utils: ^3.1.0+1
鹰眼Flutter插件:flutter_baidu_yingyan_trace: ^2.1.0

你可能感兴趣的:(百度地图_Flutter插件)