Flutter中点击Google Maps标记时如何获取标记ID及区分点击对象

核心思路 #

借助google_maps_flutter组件的两个专属回调：onMarkerTap（点击标记触发）和onTap（点击地图空白区域触发），配合标记ID的映射存储，就能实现需求。

实现步骤 #

1. 引入依赖
   在pubspec.yaml中添加google_maps_flutter包：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0 # 替换为当前最新版本

2. 存储标记与ID的映射
   用Map<String, Marker>管理所有标记，将自定义ID作为key，后续可快速关联：

final Map<String, Marker> _markers = {};

3. 初始化标记
   在initState或业务逻辑节点添加标记，为每个标记设置自定义ID：

@override
void initState() {
  super.initState();
  // 示例：添加两个带自定义ID的标记
  _addMarker('marker_sh', const LatLng(31.2304, 121.4737), '上海');
  _addMarker('marker_bj', const LatLng(39.9042, 116.4074), '北京');
}

void _addMarker(String markerId, LatLng position, String title) {
  final marker = Marker(
    markerId: MarkerId(markerId),
    position: position,
    infoWindow: InfoWindow(title: title),
  );
  setState(() {
    _markers[markerId] = marker;
  });
}

4. 配置点击回调
   在GoogleMap组件中设置两个回调，区分点击对象并获取标记ID：

GoogleMap(
  initialCameraPosition: const CameraPosition(
    target: LatLng(35.8617, 104.1954),
    zoom: 4,
  ),
  markers: Set<Marker>.of(_markers.values),
  // 点击标记时触发，直接获取ID
  onMarkerTap: (Marker marker) {
    String targetId = marker.markerId.value;
    print('点击标记，ID：$targetId');
    // 此处编写标记ID的业务处理逻辑
  },
  // 点击地图空白区域时触发
  onTap: (LatLng position) {
    print('点击地图区域，坐标：$position');
  },
)

关键说明 #

• onMarkerTap的参数是Marker对象，通过marker.markerId.value可直接拿到自定义的标记ID。
• onTap的参数是LatLng坐标，以此判定点击的是地图空白区域，实现两种点击场景的区分。
• 若需动态增删标记，只需更新_markers集合并调用setState，回调逻辑无需额外修改。

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