Flutter实现可交互地图：如何添加鼠标悬浮提示面板？

方法一：不修改包源码，通过外部监听与Overlay实现 #

这种方式无需改动包内部文件，适合不想维护自定义包版本的新手：

• 用MouseRegion包裹整个CountriesWorldMap组件，通过onHover事件获取实时鼠标位置
• 借助GlobalKey获取地图组件的渲染对象，复用包内点击逻辑的路径检测代码，判断鼠标当前悬浮的国家/城市
• 使用OverlayEntry创建悬浮提示面板，根据悬浮目标动态更新内容并控制显示/隐藏

示例代码片段：

final GlobalKey _mapKey = GlobalKey();
OverlayEntry? _tooltipEntry;
Country? _hoveredCountry;

@override
Widget build(BuildContext context) {
  return MouseRegion(
    onHover: (PointerHoverEvent event) {
      final renderBox = _mapKey.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox == null) return;
      final localPos = renderBox.globalToLocal(event.position);
      
      // 复用包内onCountryTap的路径检测逻辑，实现_getCountryAtPosition方法
      Country? targetCountry = _getCountryAtPosition(localPos);
      
      if (targetCountry != _hoveredCountry) {
        _hoveredCountry = targetCountry;
        _updateTooltip(targetCountry, event.position);
      }
    },
    onExit: (PointerExitEvent event) {
      _hideTooltip();
      _hoveredCountry = null;
    },
    child: CountriesWorldMap(
      key: _mapKey,
      onCountryTap: (country) {}, // 保留原有点击逻辑
    ),
  );
}

void _updateTooltip(Country? country, Offset globalPos) {
  _hideTooltip();
  if (country == null) return;
  
  _tooltipEntry = OverlayEntry(
    builder: (context) => Positioned(
      left: globalPos.dx + 10,
      top: globalPos.dy + 10,
      child: Material(
        elevation: 4,
        borderRadius: BorderRadius.circular(4),
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: Text('${country.name} (${country.isoCode})'),
        ),
      ),
    ),
  );
  
  Overlay.of(context)?.insert(_tooltipEntry!);
}

void _hideTooltip() {
  _tooltipEntry?.remove();
  _tooltipEntry = null;
}

核心提示：_getCountryAtPosition方法需要参考包源码中onCountryTap的实现，复用其判断点击位置对应国家的路径检测逻辑，包内部通常会维护各个国家的绘制区域数据。

方法二：修改包源码，直接添加hover事件支持 #

如果愿意维护自定义版本的包，这种方式更直接高效：

1. 找到包源码中用GestureDetector包裹国家路径的代码（通常在绘制国家的Widget里）
2. 在GestureDetector外层嵌套MouseRegion，添加onEnter和onExit回调
3. 在CountriesWorldMap的对外参数中新增onCountryHover和onCountryHoverExit回调接口
4. 外部使用时直接通过新增接口控制提示面板

示例源码修改片段（假设包内国家绘制Widget为CountryPath）：

// 原包内代码
GestureDetector(
  onTap: () => widget.onCountryTap?.call(country),
  child: CustomPaint(painter: CountryPainter(country)),
)

// 修改后代码
MouseRegion(
  onEnter: (_) => widget.onCountryHover?.call(country),
  onExit: (_) => widget.onCountryHoverExit?.call(country),
  child: GestureDetector(
    onTap: () => widget.onCountryTap?.call(country),
    child: CustomPaint(painter: CountryPainter(country)),
  ),
)

接着在CountriesWorldMap的参数定义中新增：

final void Function(Country)? onCountryHover;
final void Function(Country)? onCountryHoverExit;

外部使用示例：

CountriesWorldMap(
  onCountryTap: (country) {},
  onCountryHover: (country) {
    // 显示悬浮提示面板
  },
  onCountryHoverExit: (country) {
    // 隐藏悬浮提示面板
  },
)

新手注意事项 #

• 若选择修改源码，建议fork包的仓库到自己的代码托管平台，修改后在pubspec.yaml中引用自己的仓库地址，避免官方更新覆盖自定义修改
• 悬浮提示面板可以直接用Flutter内置的Tooltip组件，或自定义OverlayEntry实现更灵活的样式控制
• Web端测试hover效果时，需使用真实鼠标操作，模拟器可能无法触发MouseRegion相关事件

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