Flutter中SfMaps缩放时拖拽导致地图失控跳转的问题求助

问题说明 #

使用SfMaps时，执行地图放大或缩小操作的加载过程中拖拽屏幕，地图会失控跳转到远处位置。尝试通过onWillZoom禁用拖拽、固定延迟恢复的方式无法解决问题。

解决方案 #

核心思路是精准监听地图加载完成状态，替换固定延迟的轮询逻辑：

• 移除递归轮询的状态检查方法，避免无意义的异步循环
• 使用MapTileLayer的onLoad回调，在地图瓦片加载完成后再启用拖拽
• 在onWillZoom中立即禁用拖拽，确保加载过程中无法触发拖拽操作

修改后代码 #

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_maps/maps.dart';

void main() {
  return runApp(MapsApp());
}

class MapsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Maps Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late MapTileLayerController _mapController;
  late MapZoomPanBehavior _zoomPanBehavior;

  @override
  void initState() {
    super.initState();
    _mapController = MapTileLayerController();
    _zoomPanBehavior = MapZoomPanBehavior(
      zoomLevel: 13,
      minZoomLevel: 3,
      maxZoomLevel: 19,
      focalLatLng: const MapLatLng(6.263208604725203, -75.57770846194757),
      enableDoubleTapZooming: true,
      toolbarSettings: const MapToolbarSettings(direction: Axis.vertical)
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: double.infinity,
        width: double.infinity,
        child: SfMaps(
          layers: <MapLayer>[
            MapTileLayer(
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              zoomPanBehavior: _zoomPanBehavior,
              controller: _mapController,
              tooltipSettings: const MapTooltipSettings(color: Colors.transparent),
              // 缩放开始时禁用拖拽
              onWillZoom: (details) {
                _zoomPanBehavior.enablePanning = false;
                return true;
              },
              // 地图加载完成后重新启用拖拽
              onLoad: () {
                if (!_zoomPanBehavior.enablePanning) {
                  setState(() {
                    _zoomPanBehavior.enablePanning = true;
                  });
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键修改点 #

• 移除了递归轮询的recurrentPanningControl方法，消除不必要的状态循环
• 添加MapTileLayer的onLoad回调，确保地图瓦片加载完成后才恢复拖拽功能
• 简化状态管理逻辑，仅在需要时更新拖拽权限

内容的提问来源于stack exchange，提问作者Ricardo Montoya Lopez