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

Flutter应用中点击Google Maps已有地点能否获取对应详情?

完全可以实现你需要的功能,核心依赖Google Maps for Flutter SDK自带的POI点击回调能力,无需自行维护自定义标记坐标匹配逻辑。

前置准备
  • 项目中已集成官方google_maps_flutter依赖
  • 已在Google Cloud控制台开通对应平台的Maps SDK权限、Places API权限
  • 已完成Android、iOS端的Google Maps API密钥配置
具体实现流程

1. 配置POI点击监听

初始化GoogleMap组件时,开启onPoiClick回调参数,用户点击地图上默认渲染的公共地点时,该回调会自动返回对应POI的名称、经纬度、唯一标识placeId三个核心信息。

2. 动态添加点击点位的标记

在onPoiClick回调逻辑中,直接用返回的POI经纬度生成Marker添加到地图即可,无需你手动录入坐标,示例代码:

// 声明存储Marker的集合
Set<Marker> _markers = {};
GoogleMap(
  initialCameraPosition: CameraPosition(target: LatLng(39.9, 116.4), zoom: 15),
  onPoiClick: (Poi poi) {
    // 移除之前的POI标记(不需要保留多个的话可以加这行)
    _markers.removeWhere((m) => m.markerId.value == "selected_poi");
    // 新增当前点击的POI标记
    final selectedMarker = Marker(
      markerId: const MarkerId("selected_poi"),
      position: poi.latLng,
      infoWindow: InfoWindow(title: poi.name),
    );
    setState(() {
      _markers.add(selectedMarker);
    });
    // 调用方法获取POI详情
    _fetchPoiFullInfo(poi.placeId);
  },
  markers: _markers,
)

3. 获取地点完整详情

拿到POI的placeId后,调用Google Places的Place Details接口,传入该placeId即可获取该地点的全部公开信息,包括详细地址、评分、营业时间、联系方式等,不需要额外的坐标匹配操作。

常见注意点
  • Places API调用会产生独立的计费,使用前建议先确认Google Cloud的计费规则
  • 如果需要在标记的弹窗中展示完整详情,可以自定义InfoWindow组件,等详情接口返回后再更新标记的弹窗内容即可

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.10.07 08:54:04