如何在Flutter的Google Map中实现可拖拽的Circle圆形图层

官方google_maps_flutter库的Circle组件默认未提供原生拖拽能力，你可以通过监听地图手势事件手动实现拖拽逻辑，操作步骤如下：

• 1. 新增状态变量，记录拖拽状态与当前选中的圆形ID

// 原有circles集合改为可更新的状态变量
Set<Circle> circles = <Circle>{};
// 新增状态变量
bool _isDraggingCircle = false;
CircleId? _selectedCircleId;

• 2. 初始化Circle时开启点击消费，并绑定点击选中逻辑

// 初始化circles的逻辑
circles = Set.from([Circle(
  circleId: CircleId(id),
  center: LatLng(latitude, longitude),
  radius: 4000,
  // 新增两个配置
  consumeTapEvents: true, // 消费点击事件，避免被地图本身消费
  onTap: () {
    // 点击圆形时标记为选中状态，后续拖拽操作作用于该圆形
    _selectedCircleId = CircleId(id);
  },
)]);

• 3. 给GoogleMap组件绑定拖拽手势回调，更新圆形位置

GoogleMap(
  mapType: MapType.normal,
  myLocationEnabled: true,
  myLocationButtonEnabled: true,
  initialCameraPosition: initialMapLocation,
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
  circles: circles,
  // 新增手势监听配置
  onPanStart: (_) {
    // 拖拽开始时如果已选中圆形，进入拖拽状态
    if (_selectedCircleId != null) {
      _isDraggingCircle = true;
    }
  },
  onPanUpdate: (details) async {
    if (!_isDraggingCircle || _selectedCircleId == null) return;
    // 获取拖拽位置的坐标
    final GoogleMapController controller = await _controller.future;
    LatLng newCenter = await controller.getLatLng(details.localPosition);
    // 更新选中圆形的中心点坐标
    circles = circles.map((circle) {
      if (circle.circleId == _selectedCircleId) {
        return circle.copyWith(centerParam: newCenter);
      }
      return circle;
    }).toSet();
    // 刷新UI
    setState(() {});
  },
  onPanEnd: (_) {
    // 拖拽结束重置状态
    _isDraggingCircle = false;
    _selectedCircleId = null;
  },
);

如果需要调整拖拽触发的灵敏度，或者增加拖拽时的样式反馈，可以在拖拽状态变更时同步修改圆形的strokeColor、fillColor参数做视觉区分。

内容的提问来源于stack exchange，提问作者Ómar Táĥá