如何在Flutter Web的谷歌地图Marker上添加onHover悬停事件？

目前google_maps_flutter_web官方未直接暴露Marker的悬停回调接口，可通过以下两种方案实现需求：

方案1：Web端绑定原生Google Maps事件（推荐，web场景最优） #

google_maps_flutter_web本质是对Google Maps原生JS API的封装，你可以直接拿到Marker对应的原生JS实例，绑定mouseover、mouseout事件即可，触发时机和原生光标变化完全一致，无误差。
示例代码：

import 'package:flutter/foundation.dart';
import 'dart:js_util' as js_util;
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';

// 定义Marker
final Marker customMarker = Marker(
  markerId: const MarkerId('target_marker'),
  position: const LatLng(39.9042, 116.4074),
  // 其他Marker配置
);

// 地图初始化回调中绑定事件
void _onMapCreated(GoogleMapController controller) async {
  // 仅web场景执行该逻辑
  if (kIsWeb) {
    final webController = controller as GoogleMapControllerWeb;
    final nativeMarker = webController.markers[customMarker.markerId]?.webMarker;
    if (nativeMarker != null) {
      // 绑定鼠标移入悬停事件
      js_util.callMethod(nativeMarker, 'addListener', ['mouseover', () {
        // 此处写你的悬停触发逻辑
        debugPrint('Marker 进入悬停状态');
      }]);
      // 绑定鼠标移出事件
      js_util.callMethod(nativeMarker, 'addListener', ['mouseout', () {
        // 此处写你的悬停结束逻辑
        debugPrint('Marker 退出悬停状态');
      }]);
    }
  }
}

方案2：全平台兼容的坐标碰撞检测方案 #

如果你的项目需要做多端（Android/iOS/Web）统一逻辑，可以通过监听地图的指针悬停事件，结合Marker坐标做命中判断实现：

• 预先存储所有Marker的位置、markerId和对应回调
• 给GoogleMap组件添加onPointerHover回调，拿到当前指针的屏幕坐标，调用控制器的getLatLng方法将屏幕坐标转换为地图经纬度
• 遍历所有Marker，判断当前经纬度是否在Marker预设的命中范围内（可根据Marker图标大小设置偏移阈值，常规图标建议设置为0.00001~0.00005度），命中则触发对应悬停回调

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