百度地图_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