使用 flutter_map 在颤振中创建半径圆

问：

我正在尝试构建一个屏幕，允许用户使用滑块来指定以公里为单位的特定半径。在此屏幕中，用户将能够使用滑块并看到一个增长和缩小的圆圈，该圆圈表示以公里为单位的距离。

我能够在用户位置上显示一个圆圈，但我有一些问题。

1_ 圆的增大和缩小不能正确表示以 KM 为单位的距离。

2_ 当我放大或缩小时，圆圈确实会随着缩放而增长和回避。我不想要这种行为，我希望即使用户放大/缩小，圆圈也能保持不变。

3_ 还有一种方法可以停止地图旋转（阻止用户用 2 根手指旋转地图）

这是屏幕：

import 'package:--/helpers/location_helper.dart';
import 'package:--/widgets/layout/loader.dart';
import 'package:flutter/material.dart';

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  MapScreenState createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen> {
  LatLng selectedLocation = LatLng(50.850346, 4.351721);
  double radiusKm = .01;
  bool isReady = false;

  @override
  void initState() {
    super.initState();
    initializeLocation();
  }

  Future<void> initializeLocation() async {
    var value = await getUserCurrentLocation(context);

    setState(() {
      selectedLocation = LatLng(value.latitude, value.longitude);
      isReady = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Map Screen'),
      ),
      body: !isReady
          ? const AppLoader()
          : Stack(
              children: [
                FlutterMap(
                  options: MapOptions(
                    center: LatLng(
                      selectedLocation.latitude,
                      selectedLocation.longitude,
                    ),
                    zoom: 8.0,
                    maxZoom: 16,
                    minZoom: 6,
                  ),
                  children: [
                    TileLayer(
                      urlTemplate:
                          'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                      subdomains: const ['a', 'b', 'c'],
                    ),
                    CircleLayer(
                      circles: [
                        CircleMarker(
                          point: LatLng(
                            selectedLocation.latitude,
                            selectedLocation.longitude,
                          ),
                          color: Colors.blue.withOpacity(0.3),
                          borderColor: Colors.blue,
                          borderStrokeWidth: 1,
                          radius: radiusKm * 1000,
                        ),
                      ],
                    ),
                  ],
                ),
                Positioned(
                  bottom: 16,
                  left: 16,
                  right: 16,
                  child: Column(
                    children: [
                      Slider(
                          value: radiusKm,
                          min: 0.01,
                          max: 1,
                          onChanged: (value) {
                            setState(() {
                              radiusKm = value;
                            });
                          }),
                      Text('Radius: ${radiusKm.toStringAsFixed(1)} km'),
                    ],
                  ),
                ),
              ],
            ),
    );
  }
}

这是 getUserCurrentLocation 函数：

Future<Position> getUserCurrentLocation(context) async {
  bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
  if (!serviceEnabled) {
    return Future.error(AppLocalizations.of(context)!.locationdisabled);
  }

  LocationPermission permission = await Geolocator.checkPermission();

  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      return Future.error(AppLocalizations.of(context)!.locationdenied);
    }
  }

  if (permission == LocationPermission.deniedForever) {
    return Future.error(
        AppLocalizations.of(context)!.locationpermanentlydenied);
  }

  var location = await Geolocator.getCurrentPosition();

  return location;
}

使用的包装：

地理定位器：^10.1.0

纬度2：^0.8.0

flutter_map： ^4.0.0

我知道我可能对某些变量的值和计算有问题，例如

半径Km 和 CircleLayer 半径：半径Km*1000，

我希望有以下解决方案：

1_ 圆的增大和缩小不能正确表示以 KM 为单位的距离。

2_ 当我放大或缩小时，圆圈确实会随着缩放而增长和回避。我不想要这种行为，我希望即使用户放大/缩小，圆圈也能保持不变。

3_ 还有一种方法可以停止地图旋转（阻止用户用 2 根手指旋转地图）