Flutter中如何通过FloatingActionButton切换Google Maps标记可见性

问题场景 #

需要通过FloatingActionButton切换Google Maps上标记列表的显示/隐藏状态，现有添加标记的函数和待完善的FAB代码，需补充切换逻辑。

现有代码 #

添加标记的函数

void addAll() async {
    _markers = Set<Marker>();
    int i = 0;
    if(_markerList.length > 0) {
      for (i = 0; i < _markerList.length; i++) {
        _markers.add(Marker(
            markerId: MarkerId(i.toString()),
            position: LatLng(_markerList[i].latitude!,
                _markerList[i].longitude!),
            icon: BitmapDescriptor.fromBytes(markerIcon!),
        ));
      }
    }
    setState(() {});
  }

待完善的FloatingActionButton代码

Padding(
   padding: EdgeInsets.all(16.0),
   child: Align(
      alignment: Alignment.bottomRight,
      child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
         Builder(
            builder: (context) => FloatingActionButton(
               child: Icon(Icons.location_pin),
               onPressed: () {
                  isVisible ? isVisible = false : isVisible = true;
                  if(isVisible){
                     //Create the new visible marker list here
                  }
                  else {
                     //Create the new non visible marker list here
                  }
               }),
            ),
       ])),
   )

解决方案 #

这里提供两种高效的实现方式，根据你的需求选择：

方式一：修改标记的visible属性（推荐，适合大量标记）

这种方式不需要重新创建标记集合，直接修改现有标记的可见性状态，性能更优。

1. 先修改addAll函数，初始化标记时带上visible属性：

void addAll() async {
  _markers = Set<Marker>();
  if(_markerList.isNotEmpty) {
    for (int i = 0; i < _markerList.length; i++) {
      _markers.add(Marker(
        markerId: MarkerId(i.toString()),
        position: LatLng(_markerList[i].latitude!, _markerList[i].longitude!),
        icon: BitmapDescriptor.fromBytes(markerIcon!),
        visible: isVisible, // 初始化时同步可见性状态
      ));
    }
  }
  setState(() {});
}

2. 完善FloatingActionButton的点击逻辑：

Padding(
  padding: EdgeInsets.all(16.0),
  child: Align(
    alignment: Alignment.bottomRight,
    child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
      Builder(
        builder: (context) => FloatingActionButton(
          // 切换图标，直观提示当前状态
          child: Icon(isVisible ? Icons.location_pin : Icons.location_off),
          onPressed: () {
            setState(() {
              // 切换可见性状态
              isVisible = !isVisible;
              // 更新所有标记的可见性
              _markers = _markers.map((marker) {
                return marker.copyWith(
                  visibleParam: isVisible,
                );
              }).toSet();
            });
          },
        ),
      ),
    ]),
  ),
)

方式二：切换标记集合（适合少量标记，实现更简单）

维护一个完整的标记集合，切换时直接赋值显示全部或空集合：

1. 新增变量存储完整标记集合：

Set<Marker> _allMarkers = {};
Set<Marker> _markers = {};
bool isVisible = true;

2. 修改addAll函数：

void addAll() async {
  _allMarkers = Set<Marker>();
  if(_markerList.isNotEmpty) {
    for (int i = 0; i < _markerList.length; i++) {
      _allMarkers.add(Marker(
        markerId: MarkerId(i.toString()),
        position: LatLng(_markerList[i].latitude!, _markerList[i].longitude!),
        icon: BitmapDescriptor.fromBytes(markerIcon!),
      ));
    }
  }
  // 初始化时显示所有标记
  _markers = _allMarkers;
  setState(() {});
}

3. 完善FloatingActionButton的点击逻辑：

Padding(
  padding: EdgeInsets.all(16.0),
  child: Align(
    alignment: Alignment.bottomRight,
    child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
      Builder(
        builder: (context) => FloatingActionButton(
          child: Icon(isVisible ? Icons.location_pin : Icons.location_off),
          onPressed: () {
            setState(() {
              isVisible = !isVisible;
              // 直接切换标记集合
              _markers = isVisible ? _allMarkers : {};
            });
          },
        ),
      ),
    ]),
  ),
)

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