Flutter Google Maps插件iOS端手势与触摸异常问题求助

阿华AIGC实验室

2026-5-12

解决iOS上Google Maps Flutter插件平移手势异常及UI触摸问题

我之前在使用旧版本google_maps_flutter时也遇到过类似的iOS手势冲突问题，结合你的代码和环境信息，问题主要出在手势识别器的配置以及Stack布局的手势优先级上，下面是具体的分析和解决方案：

问题根源

自定义PanGestureRecognizer干扰默认手势处理
你手动添加了PanGestureRecognizer到gestureRecognizers集合中，这会覆盖插件默认的手势识别逻辑。在iOS上，地图的平移手势需要绑定到原生地图视图内部，而自定义的手势器会把平移事件传递给父级Stack，导致整个地图组件跟着移动。
信息窗口的触摸事件透传
你的Positioned信息窗口没有明确设置触摸行为，当用户点击或滑动时，事件可能会透传给下方的地图，导致其他UI无法响应。

解决方案

1. 移除自定义的PanGestureRecognizer

插件默认已经配置了完整的手势处理，不需要手动添加PanGestureRecognizer。修改GoogleMap的参数：

GoogleMap(
  onMapCreated: _onMapCreated,
  scrollGesturesEnabled: true,
  zoomGesturesEnabled: true,
  tiltGesturesEnabled: true,
  initialCameraPosition: CameraPosition(
    target: _center ?? LatLng(0, 0),
    zoom: 15.0,
  ),
  // 移除这一行：gestureRecognizers: Set()..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
)

2. 确保信息窗口的触摸事件被正确捕获

用GestureDetector包裹信息窗口组件，并设置behavior: HitTestBehavior.opaque，阻止事件透传给地图：

Positioned(
  bottom: 16,
  left: 16,
  right: 16,
  child: AnimatedContainer(
    duration: moreInfoAnimationTime,
    curve: Curves.easeIn,
    transform: Matrix4.translationValues(_moreInfoOffset, 0, 0),
    child: tappedOffer != null 
        ? GestureDetector(
            behavior: HitTestBehavior.opaque,
            child: Container(
              height: OffersMapItemView.HEIGHT,
              width: MediaQuery.of(context).size.width - 40,
              child: OffersMapItemView(
                tappedOffer,
                onTap: (OffersAndPromo offer) => this.goToOfferDetails(offer),
              ),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(3.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black45,
                    blurRadius: 10.0,
                  ),
                ],
              ),
            ),
          )
        : Text(''),
  ),
)