You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter Google Map点击Marker如何获取Marker信息(如Marker ID)

在Flutter Google Map中点击Marker获取Marker信息(如ID)的方案

核心思路是给每个Marker单独绑定onTap回调,而非依赖地图的全局onTap事件——后者只能拿到经纬度,无法直接关联到具体Marker的信息。

基础实现示例

先初始化Marker列表,为每个Marker设置专属的onTap回调,在回调里直接访问该Marker的属性:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  List<Marker> _markers = [];

  @override
  void initState() {
    super.initState();
    // 初始化带点击回调的Marker
    _markers = [
      Marker(
        markerId: MarkerId('shop_001'),
        position: LatLng(31.2304, 121.4737),
        infoWindow: InfoWindow(title: 'XX便利店'),
        onTap: () {
          // 直接获取当前Marker的ID和其他信息
          print('点击了Marker: ${MarkerId('shop_001')}');
          // 也可以访问position、infoWindow等属性
          print('Marker位置: ${LatLng(31.2304, 121.4737)}');
        },
      ),
      Marker(
        markerId: MarkerId('park_002'),
        position: LatLng(31.2165, 121.4365),
        infoWindow: InfoWindow(title: '城市中央公园'),
        onTap: () {
          print('点击了Marker: ${MarkerId('park_002')}');
        },
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(31.2304, 121.4737),
          zoom: 12,
        ),
        markers: Set<Marker>.of(_markers),
        // 无需依赖地图的onTap,除非需要处理空白区域点击
        // onTap: (LatLng position) {},
      ),
    );
  }
}

动态生成Marker的场景(从接口/列表取数)

如果Marker是动态生成的(比如从后端接口获取地点数据),可以在循环创建时直接绑定回调,同时关联业务数据:

// 假设这是从接口拿到的业务数据模型
class Place {
  final String id;
  final String name;
  final double lat;
  final double lng;

  Place({required this.id, required this.name, required this.lat, required this.lng});
}

// 在初始化方法中生成Marker
void _initMarkers() {
  List<Place> placeList = [
    Place(id: 'restaurant_003', name: '川味火锅店', lat: 31.2286, lng: 121.4822),
    Place(id: 'station_004', name: '地铁站', lat: 31.2358, lng: 121.4691),
  ];

  _markers = placeList.map((place) {
    return Marker(
      markerId: MarkerId(place.id),
      position: LatLng(place.lat, place.lng),
      infoWindow: InfoWindow(title: place.name),
      onTap: () {
        // 直接获取业务数据和Marker信息
        print('Marker ID: ${place.id}');
        print('地点名称: ${place.name}');
        // 这里可以触发跳转详情页、弹窗等业务逻辑
      },
    );
  }).toList();
}

这种方式的优势是,每个Marker的onTap回调直接绑定到对应的实例,你可以在回调里访问该Marker的所有属性,甚至直接关联业务模型数据,完全满足获取Marker ID及其他信息的需求。

内容的提问来源于stack exchange,提问作者Ashebir

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.25 13:22:14