如何在flutter_map中实现Polyline点击其他区域隐藏？

核心问题解决：无需额外插件 #

你之前用GestureDetector包裹FlutterMap没成功，是因为FlutterMap内部的手势处理会拦截外部的GestureDetector事件。直接用FlutterMap自带的MapOptions.onTap回调就能实现点击空白区域隐藏折线的需求，具体优化步骤如下：

• 给MapOptions添加onTap回调，点击地图空白时将所有折线的显示状态置为false
• 优化标记的点击逻辑，改成切换显示状态（点击标记时，当前折线显示则隐藏，隐藏则显示）
• 优化PolylineLayer的写法，根据状态动态生成折线列表，避免创建透明折线浪费资源

修改后的完整代码 #

import 'package:dilni/views/maproutes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_location_marker/flutter_map_location_marker.dart';
import 'package:latlong2/latlong.dart';
import 'package:geolocator/geolocator.dart';

// 合并冗余的MarkerWidget，用参数区分不同路线的标记样式
class RouteMarkerWidget extends StatelessWidget {
  final LatLng point;
  final ValueChanged<bool> onTap;
  final Color markerColor;

  const RouteMarkerWidget({
    super.key,
    required this.point,
    required this.onTap,
    required this.markerColor,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onTap(true),
      child: Icon(
        Icons.location_on,
        color: markerColor,
      ),
    );
  }
}

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

  @override
  State<MapStart> createState() => _MapStartState();
}

class _MapStartState extends State<MapStart> {
  final MapController mapController = MapController();
  final LatLng currentCenter = const LatLng(40.667578954102694, -73.90336806212608);

  Future<void> _requestLocationPermission() async {}

  @override
  void initState() {
    super.initState();
    _requestLocationPermission().then((_) async {});
  }

  _centerOnMyLocation() async {
    final Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    final LatLng userLocation = LatLng(position.latitude, position.longitude);
    mapController.move(userLocation, mapController.camera.zoom);
  }

  bool _showLine1 = false;
  bool _showLine2 = false;

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    return Scaffold(
      body: FlutterMap(
        mapController: mapController,
        options: MapOptions(
          initialCenter: currentCenter,
          initialZoom: 14.5,
          // 点击地图空白区域时隐藏所有折线
          onTap: (_, __) {
            setState(() {
              _showLine1 = false;
              _showLine2 = false;
            });
          },
        ),
        children: [
          TileLayer(
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'tn.dilni.dilni',
          ),
          const CurrentLocationLayer(),
          MarkerLayer(
            markers: [
              Marker(
                point: const LatLng(40.6693937337096, -73.90390454876147),
                child: RouteMarkerWidget(
                  point: const LatLng(40.6693937337096, -73.90390454876147),
                  // 点击标记切换折线1的显示状态
                  onTap: (_) => setState(() => _showLine1 = !_showLine1),
                  markerColor: const Color.fromARGB(255, 230, 156, 18),
                ),
              ),
              Marker(
                point: const LatLng(40.66582935431103, -73.9030140553811),
                child: RouteMarkerWidget(
                  point: const LatLng(40.66582935431103, -73.9030140553811),
                  // 点击标记切换折线2的显示状态
                  onTap: (_) => setState(() => _showLine2 = !_showLine2),
                  markerColor: const Color.fromARGB(255, 212, 12, 186),
                ),
              ),
            ],
          ),
          // 动态生成折线：仅当显示状态为true时添加对应折线
          PolylineLayer(
            polylines: [
              if (_showLine1)
                Polyline(
                  points: route1pl.points,
                  strokeWidth: 10.0,
                  color: Colors.red,
                ),
            ],
          ),
          PolylineLayer(
            polylines: [
              if (_showLine2)
                Polyline(
                  points: route2pl.points,
                  strokeWidth: 10.0,
                  color: const Color.fromARGB(255, 13, 172, 55),
                ),
            ],
          ),
        ],
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => mapController.rotate(0.0),
            tooltip: 'Orient North',
            child: const Icon(Icons.navigation),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => mapController.move(
              mapController.camera.center,
              mapController.camera.zoom + 1.0,
            ),
            tooltip: 'Zoom In',
            child: const Icon(Icons.zoom_in),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => mapController.move(
              mapController.camera.center,
              mapController.camera.zoom - 1.0,
            ),
            tooltip: 'Zoom Out',
            child: const Icon(Icons.zoom_out),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: _centerOnMyLocation,
            tooltip: 'Center on Me',
            child: const Icon(Icons.my_location),
          ),
          const SizedBox(height: 10),
        ],
      ),
    );
  }
}

关于flutter_map_tappable_polyline插件的说明 #

这个插件的核心作用是让折线本身支持点击交互（比如点击折线弹出详情、切换状态等），如果你不需要给折线添加点击事件，完全没必要用它。你的核心需求是点击地图空白隐藏折线，用上面的方法就能完美解决，不需要额外引入插件。

内容的提问来源于stack exchange，提问作者ElectricArdv