百度地圖_Flutter插件
顯示3D地圖但惶、個(gè)性化地圖(改變地圖個(gè)元素顏色)衬吆、繪制3D模型丑瞧。
百度地圖創(chuàng)建應(yīng)用與獲取appkey(ios和andriod分別獲取appkey)
1跨算、iOS注冊(cè)和獲取密鑰
注意:填寫對(duì)應(yīng)工程的安全碼Bundle Identifier讨勤。
2瑞佩、andriod注冊(cè)和獲取密鑰
注意:填寫對(duì)應(yīng)工程的包名掏父。
在app目錄下的build.gradle文件中找到applicationId淆储,并確保其值與AndroidManifest.xml中定義的package相同冠场。
使用Android Studio開發(fā),如遇到applicationId 與package不一致的情況本砰,以appclicationid為準(zhǔn)碴裙。
注意:獲取SHA1
調(diào)試版本(debug)和發(fā)布版本(release)下的 SHA1 值是不同的,發(fā)布 apk 時(shí)需要根據(jù)發(fā)布 apk 對(duì)應(yīng)的 keystore 重新配置 Key。
Flutter開發(fā)環(huán)境配置
pubspec.yaml文件中添加插件
dependencies:
flutter:
sdk: flutter
# 權(quán)限管理插件
permission_handler: ^9.2.0
# 基礎(chǔ)地圖:
flutter_baidu_mapapi_map: ^3.1.0+1
# 檢索:
flutter_baidu_mapapi_search: ^3.1.0
# 計(jì)算工具:
flutter_baidu_mapapi_utils: ^3.1.0+1
添加地圖舔株,設(shè)置3D地圖屬性
/// 創(chuàng)建地圖
Container generateMap() {
return Container(
height: screenSize.height,
width: screenSize.width,
child: BMFMapWidget(
onBMFMapCreated: (controller) {
onBMFMapCreated(controller);
},
mapOptions: initMapOptions(),
),
);
}
/// 地圖創(chuàng)建完成回調(diào)
void onBMFMapCreated(BMFMapController controller) {
mapController = controller;
mapController?.setMapDidLoadCallback(callback: () {
_mapCustomMapStyle(); //設(shè)置個(gè)性化地圖背景色
print('mapDidLoad-地圖加載完成!!!');
}); // 地圖加載完成回調(diào)
}
/// 設(shè)置地圖參數(shù)
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;
}
個(gè)性化地圖控制臺(tái)設(shè)置方法
——1.選擇模版/編輯個(gè)性化地圖
——2.控制臺(tái)導(dǎo)出.json文件路徑/樣式ID
——3.代碼添加個(gè)性化地圖
/// 設(shè)置個(gè)性化地圖樣式
//方式1:本地文件
void _mapCustomMapStyle() {
mapController?.setCustomMapStyle('files/custom_map_config.sty', 0);
mapController?.setCustomMapStyleEnable(true);
}
// 方式2::根據(jù)個(gè)性化樣式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柱狀圖
/// 構(gòu)造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/
/// 構(gòu)造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);
}
地圖其他功能
定位Flutter插件:flutter_bmflocation: ^3.1.0
地圖Flutter插件
基礎(chǔ)地圖:flutter_baidu_mapapi_map: ^3.1.0+1
檢索:fflutter_baidu_mapapi_search: ^3.1.0
計(jì)算工具:flutter_baidu_mapapi_utils: ^3.1.0+1
鷹眼Flutter插件:flutter_baidu_yingyan_trace: ^2.1.0