一、百度地圖引入-flutter版本

百度地圖引入---flutter 

一、引入百度地圖

1. 相關的引入需要參考百度地圖開放平台api
2. 在項目中集成百度地圖Flutter插件
3. 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插件集成基本完成，並且可以加載普通地圖，同時有申請定位和獲取定位信息(定位的經緯度)，並且可以切換地圖類型