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

google_maps_flutter:如何通过代码控制InfoWindow的显示、隐藏与更新?

解决google_maps_flutter中通过代码控制InfoWindow显示/隐藏的问题

可以通过代码控制InfoWindow的显示与隐藏,核心是结合GoogleMapController的API和Marker的InfoWindow配置来实现。针对你遇到的切换Marker时旧InfoWindow不消失、代码调用无法显示目标InfoWindow的问题,按以下方式修改代码即可解决:

关键修改点

  1. 利用GoogleMapController的showMarkerInfoWindow和hideMarkerInfoWindow方法,手动控制InfoWindow的显示/隐藏。
  2. 更新Marker集合时,给未选中的Marker设置InfoWindow.empty(),彻底移除其InfoWindow配置,避免旧状态残留。

修改后的代码

1. 优化selectMarker方法

void selectMarker(String markerId, bool requiresCameraPositioning) async {
  // 先隐藏之前选中Marker的InfoWindow
  if (_localSelectedMarkerId != null) {
    await mapControllerManager.hideMarkerInfoWindow(MarkerId(_localSelectedMarkerId!));
  }

  _localSelectedMarkerId = markerId;
  final markerItem = markerController.markers.firstWhere(
    (marker) => marker.id == markerId,
    orElse: () => throw Exception('Marker not found'),
  );

  if (requiresCameraPositioning) {
    await mapControllerManager.animateCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          target: LatLng(markerItem.position.latitude, markerItem.position.longitude),
          zoom: 15,
        ),
      ),
    );
  }

  _updateMarkerIcons(); // 刷新Marker状态

  // 显示当前选中Marker的InfoWindow
  await mapControllerManager.showMarkerInfoWindow(MarkerId(markerId));

  _showModalBottomSheet(context, markerId);
}

2. 调整_updateMarkerIcons方法

void _updateMarkerIcons() {
  setState(() {
    Set<Marker> updatedMarkers = {};
    for (var markerItem in markerController.markers) {
      bool isSelected = markerItem.id == _localSelectedMarkerId;

      updatedMarkers.add(
        Marker(
          markerId: MarkerId(markerItem.id),
          position: markerItem.position,
          // 选中的Marker保留正常InfoWindow,未选中的清空
          infoWindow: isSelected 
              ? InfoWindow(title: markerItem.title) 
              : InfoWindow.empty(),
          icon: determineMarkerIcon(markerItem),
          onTap: () {
            selectMarker(markerItem.id, false);
          },
        ),
      );
    }
    _markers = updatedMarkers;
  });
}

为什么之前的方法无效?

  • 设置infoWindow: null无法清空旧的InfoWindow状态,google_maps_flutter会保留Marker之前的配置,必须使用InfoWindow.empty()才能彻底移除。
  • 仅更新选中状态而不调用showMarkerInfoWindow,代码触发选中时不会自动显示InfoWindow——该操作默认仅由用户点击Marker触发。
  • 切换Marker时未主动隐藏旧的InfoWindow,地图不会自动管理多个InfoWindow的显示状态,导致旧窗口残留。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.05 14:03:17