Flutter高德地图实现定位和相机位置移动

本人真的研究了好久,卡了2天,接下来废话不多说,直接开始教学。

首先定义地图框架,把定位按钮和我的位置按钮以及地图给放好

以下是页面框架:

Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    flutterLocation.setLocationOption(aMapLocationOption);
                    flutterLocation.startLocation();
                  },
                  child: Text("开始定位"),
                ),
                ElevatedButton(//用不到
                  onPressed: () {
                    flutterLocation.stopLocation();
                    dispose();
                  },
                  child: Text("停止定位"),
                ),
                ElevatedButton(
                  onPressed: () {
                    LatLng currentPositon=LatLng(nowLatitude, nowLongitude);
                    moveCamera(currentPositon);//重点
                  },
                  child: Text("我的位置"),
                ),
              ],
            ),
            Container(
              //color: Colors.red,
              height: MediaQuery.of(context).size.height - 200,
              width: MediaQuery.of(context).size.width,
              child: mapWidget,//地图框架
            ),
            FutureBuilder<String?>(//可以不看
              future: getApprovalNumber(),
              builder: (ctx, snapshot) {
                return Column(
                  children: [
                    Text("${snapshot.data}"),
                  ],
                );
              },
            ),
            Text("$nowLatitude , $nowLongitude"),//点击开始定位后,显示当前经纬度
          ],
        ),

再定义mapWidget

  late AMapController _mapController;
  late double nowLatitude;//这俩是经纬度
  late double nowLongitude;//这俩是经纬度
  Map<String, Object> get locationResult => _locationResult ?? {};
  Map<String, Object>? _locationResult;
  LocationInfo get locationInfo => LocationInfo(locationResult);


  late AMapWidget mapWidget = AMapWidget(
    apiKey: const AMapApiKey(
      iosKey: "null",
      androidKey: "d1c436f65a1c35cf757f82eed0323cb1",
    ),
    privacyStatement: const AMapPrivacyStatement(hasContains: true, hasShow: true, hasAgree: true),
    onMapCreated: onMapCreated,//重点
    myLocationStyleOptions: MyLocationStyleOptions(true),
  );

继续,定义onMapCreated

  void onMapCreated(AMapController controller) {
    CameraUpdate.newCameraPosition(
      CameraPosition(
        //中心点
          target: LatLng(31.230378, 121.473658),//默认初始值
          //缩放级别
          zoom: 13,
          //俯仰角0°~45°(垂直与地图时为0)
          tilt: 30,
          //偏航角 0~360° (正北方为0)
          bearing: 0),
    );
    setState(() {
      _mapController = controller;//重点,在顶部定义好
    });
  }

接下来是获取定位的经纬度值

先写好一个读取数据的框架,跟mapWidget顶上的东西呼应了:

class LocationInfo {
  //TODO:应当再此类对信息做转换,明确数据类型

  String? locationTime;
  String? province;
  String? callbackTime;
  String? district;
  double? speed;

  double? latitude;
  double? longitude;

  String? country;
  String? city;
  String? cityCode;
  String? street;
  String? streetNumber;
  String? address;
  String? description;

  double? bearing;
  double? accuracy;
  String? adCode;
  double? altitude;
  int? locationType;

  LocationInfo(Map<String, Object> locationResult) {
    locationTime = locationResult["locationTime"] as String;
    province = locationResult["province"] as String;
    callbackTime = locationResult["callbackTime"] as String;
    district = locationResult["district"] as String;
    speed = locationResult["speed"] as double;
    //
    latitude = double.parse(locationResult["latitude"] as String);
    longitude = double.parse(locationResult["longitude"] as String);
    //
    country = locationResult["country"] as String;
    city = locationResult["city"] as String;
    cityCode = locationResult["cityCode"] as String;
    street = locationResult["street"] as String;
    streetNumber = locationResult["streetNumber"] as String;
    address = locationResult["address"] as String;
    description = locationResult["description"] as String;
    //
    bearing = locationResult["bearing"] as double;
    accuracy = locationResult["accuracy"] as double;
    adCode = locationResult["adCode"] as String;
    altitude = locationResult["altitude"] as double;
    locationType = locationResult["locationType"] as int;
  }
}

再把监听事件写在这里,这样点击开始定位之后,经纬度就被改变了。

  @override
  void initState() {
    //markerMap = {};
    nowLatitude = 33.2;
    nowLongitude = 121.0;
    AMapFlutterLocation.updatePrivacyShow(true, true);
    AMapFlutterLocation.updatePrivacyAgree(true);
    requestPermission();
    AMapFlutterLocation.setApiKey("d1c436f65a1c35cf757f82eed0323cb1", "ios ApiKey");

    subscription = flutterLocation.onLocationChanged().listen((event) {//重点
      setState(() {
        _locationResult = event;
      });
      print(event.toString());
      nowLatitude = (event["latitude"] as double);
      nowLongitude = (event["longitude"] as double);
    });
    moveCamera;
    super.initState();
  }

最后,写相机移动

  void moveCamera(LatLng position) {
    _mapController.moveCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          //中心点
            target: position,
            //缩放级别
            zoom: 13,
            //俯仰角0°~45°(垂直与地图时为0)
            tilt: 10,
            //偏航角 0~360° (正北方为0)
            bearing: 0),
      ),
      animated: true,
      duration: 1000,
    );
  }

OK,完事,还有些没用的废代码我还没删,开发还没完成,我继续忙去了,有问题留言吧,我也不一定会哈哈哈哈

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值