一、百度地图引入-flutter版本
百度地图引入---flutter
一、引入百度地图
- 相关的引入需要参考百度地图开放平台api
- 在项目中集成百度地图Flutter插件
- flutter 开发环境配置---参考百度地图开发平台： https://lbsyun.baidu.com/index.php?title=flutter/loc/create-project/configure
二、显示地图
1.百度地图显示地图的widget是：BMFMapWidget
BMFMapWidget( onBMFMapCreated: (controller) { onBMFMapCreated(controller); }, mapOptions: BMFMapOptions( center: BMFCoordinate(_lat, _lng), zoomLevel: 18, changeCenterWithDoubleTouchPointEnabled: true, gesturesEnabled: true, scrollEnabled: true, zoomEnabled: true, rotateEnabled: true, compassPosition: BMFPoint(0, 0), compassEnabled: true, showMapScaleBar: false, maxZoomLevel: 20, minZoomLevel: 8, trafficEnabled: true, ), ),
2.我项目里是再build构建
@override Widget build(BuildContext context) { return Scaffold( body: Container( child: Stack( children: [ Container( height: 812.h, child: BMFMapWidget( onBMFMapCreated: (controller) { onBMFMapCreated(controller); }, mapOptions: BMFMapOptions( center: BMFCoordinate(_lat, _lng), zoomLevel: 18, changeCenterWithDoubleTouchPointEnabled: true, gesturesEnabled: true, scrollEnabled: true, zoomEnabled: true, rotateEnabled: true, compassPosition: BMFPoint(0, 0), compassEnabled: true, showMapScaleBar: false, maxZoomLevel: 20, minZoomLevel: 8, trafficEnabled: true, ), ), ), _buildMapRadio(), _buildPlotTypeCheckBox(), _buildProjectType(), _buildTestButton(), ], ), ), ); }
3.地图加载完成后的回调---把地图的BMFMapController设置给局部变量，因为很多操作都在BMFMapController里面
/// 创建完成回调 void onBMFMapCreated(BMFMapController controller) { myMapController = controller; /// 地图加载回调 myMapController?.setMapDidLoadCallback(callback: () { print('mapDidLoad-地图加载完成'); myMapController?.showUserLocation(true); _startLocation(); }); }
4.因为要开启定位，需要申请定位权限，可以在initState里面申请定位权限
@override void initState() { super.initState(); /// 动态申请定位权限 _locationPlugin.requestPermission(); /// 动态监听地图信息 _locationListener = _locationPlugin.onResultCallback().listen((Map<String, Object> result){ setState(() { print('动态申请定位权限 - 更新了状态'); if (result != null) { _loationResult = result; _baiduLocation = BaiduLocation.fromMap(result); _lat = _baiduLocation.latitude; _lng = _baiduLocation.longitude; print('动态申请定位权限 lat ------ ' + _lat.toString() + 'lng ------- ' + _lng.toString()); _stopLocation(); BMFCoordinate coordinate = BMFCoordinate(_lat, _lng); BMFLocation location = BMFLocation( coordinate: coordinate, altitude: 0, horizontalAccuracy: 5, verticalAccuracy: -1.0, speed: -1.0, course: -1.0); BMFUserLocation userLocation = BMFUserLocation( location: location, ); myMapController.updateLocationData(userLocation); //设置定位图层样式 BMFUserLocationDisplayParam displayParam = BMFUserLocationDisplayParam( locationViewOffsetX: 0, locationViewOffsetY: 0, accuracyCircleFillColor: Colors.red, accuracyCircleStrokeColor: Colors.blue, isAccuracyCircleShow: true, //本地资源图标路径 locationViewHierarchy: BMFLocationViewHierarchy.LOCATION_VIEW_HIERARCHY_BOTTOM); myMapController?.updateLocationViewWithParam(displayParam); myMapController?.setCenterCoordinate(coordinate, true, animateDurationMs: 1000); _getMapBounds(); ///添加扇形 List<LatLngDegree> mapPoints = []; mapPoints[0] = LatLngDegree(latitude: _lat, longitude: _lng, degree: 0); mapPoints[1] = LatLngDegree(latitude: _lat, longitude: _lng, degree: 120); mapPoints[2] = LatLngDegree(latitude: _lat, longitude: _lng, degree: 240); _drawSector(mapPoints); } }); }); }
5.启动定位--同时设置定位参数，否则获取不到定位信息
/// 启动定位 void _startLocation() { if (null != _locationPlugin) { _setLocOption(); print('开始定位_startLocation'); _locationPlugin.startLocation(); } }
/// 设置android端和ios端定位参数 void _setLocOption() { /// android 端设置定位参数 BaiduLocationAndroidOption androidOption = new BaiduLocationAndroidOption(); androidOption.setCoorType("bd09ll"); // 设置返回的位置坐标系类型 androidOption.setIsNeedAltitude(true); // 设置是否需要返回海拔高度信息 androidOption.setIsNeedAddres(true); // 设置是否需要返回地址信息 androidOption.setIsNeedLocationPoiList(true); // 设置是否需要返回周边poi信息 androidOption.setIsNeedNewVersionRgc(true); // 设置是否需要返回最新版本rgc信息 androidOption.setIsNeedLocationDescribe(true); // 设置是否需要返回位置描述 androidOption.setOpenGps(true); // 设置是否需要使用gps androidOption.setLocationMode(LocationMode.Hight_Accuracy); // 设置定位模式 androidOption.setScanspan(1000); // 设置发起定位请求时间间隔 Map androidMap = androidOption.getMap(); /// ios 端设置定位参数 BaiduLocationIOSOption iosOption = new BaiduLocationIOSOption(); iosOption.setIsNeedNewVersionRgc(true); // 设置是否需要返回最新版本rgc信息 iosOption.setBMKLocationCoordinateType("BMKLocationCoordinateTypeBMK09LL"); // 设置返回的位置坐标系类型 iosOption.setActivityType("CLActivityTypeAutomotiveNavigation"); // 设置应用位置类型 iosOption.setLocationTimeout(10); // 设置位置获取超时时间 iosOption.setDesiredAccuracy("kCLLocationAccuracyBest"); // 设置预期精度参数 iosOption.setReGeocodeTimeout(10); // 设置获取地址信息超时时间 iosOption.setDistanceFilter(100); // 设置定位最小更新距离 iosOption.setAllowsBackgroundLocationUpdates(true); // 是否允许后台定位 iosOption.setPauseLocUpdateAutomatically(true); // 定位是否会被系统自动暂停 Map iosMap = iosOption.getMap(); _locationPlugin.prepareLoc(androidMap, iosMap); }
6.相应的提供停止定位的方法，并在dispose的时候停止定位
/// 停止定位 void _stopLocation() { if (null != _locationPlugin) { _locationPlugin.stopLocation(); print('停止定位_stopLocation'); } }
三、切换不同地图类型
1.可以通过设置：BMFMapOptions来切换不同地图类型、此处把设置在方法里，可以切换地图类型的时候直接调用， 主要是设置：mapType类型
/// 设置卫星地图参数 void _updateSatellite(){ BMFMapOptions satelliteMapOptions = BMFMapOptions( center: BMFCoordinate(_lat, _lng), zoomLevel: 18, changeCenterWithDoubleTouchPointEnabled: true, gesturesEnabled: true, scrollEnabled: true, zoomEnabled: true, rotateEnabled: true, compassPosition: BMFPoint(0, 0), compassEnabled: true, showMapScaleBar: false, maxZoomLevel: 20, minZoomLevel: 8, trafficEnabled: true, mapType: BMFMapType.Satellite, ); myMapController?.updateMapOptions(satelliteMapOptions); }
/// 设置普通地图参数 void _updateStandard(){ BMFMapOptions mapOptions = BMFMapOptions( center: BMFCoordinate(_lat, _lng), zoomLevel: 18, changeCenterWithDoubleTouchPointEnabled: true, gesturesEnabled: true, scrollEnabled: true, zoomEnabled: true, rotateEnabled: true, compassPosition: BMFPoint(0, 0), compassEnabled: true, showMapScaleBar: false, maxZoomLevel: 20, minZoomLevel: 8, trafficEnabled: true, ); myMapController?.updateMapOptions(mapOptions); }
到这里，百度地图的flutter插件集成基本完成，并且可以加载普通地图，同时有申请定位和获取定位信息(定位的经纬度)，并且可以切换地图类型
