如何在google_maps_flutter中实现按钮仅在标记可视时显示

我刚好做过类似的需求，给你梳理下完全适配google_maps_flutter插件的具体实现步骤，亲测可行：

1. 准备必要的变量 #

首先在你的State类里定义几个关键变量，用来存标记位置、地图控制器和按钮显示状态：

// 存储所有标记的经纬度
List<LatLng> _markerPositions = [];
// 地图控制器，用来获取可视区域边界
GoogleMapController? _mapController;
// 控制按钮是否显示的开关
bool _shouldShowButton = false;

2. 初始化标记并保存位置 #

当你添加标记的时候，记得把每个标记的position存到_markerPositions列表里，比如：

// 假设你是这样添加标记的
Set<Marker> _markers = {
  Marker(
    markerId: MarkerId('marker1'),
    position: LatLng(37.7749, -122.4194),
  ),
  Marker(
    markerId: MarkerId('marker2'),
    position: LatLng(37.7898, -122.401),
  ),
};

// 在initState或者标记初始化时，提取所有标记的位置
@override
void initState() {
  super.initState();
  _markerPositions = _markers.map((marker) => marker.position).toList();
}

3. 监听地图相机变化，检查标记是否在可视区域 #

利用GoogleMap的onCameraIdle回调（相机停止移动后触发，避免频繁计算），在每次相机位置稳定后，检查是否有标记处于当前可视区域内：

首先实现检查方法：

Future<void> _checkMarkersInViewport() async {
  if (_mapController == null || _markerPositions.isEmpty) return;

  // 获取当前地图的可视区域边界
  final LatLngBounds visibleBounds = await _mapController!.getVisibleRegion();
  
  // 遍历所有标记，判断是否有至少一个在可视区域内
  bool hasMarkerInView = _markerPositions.any((position) {
    return visibleBounds.contains(position);
  });

  // 更新按钮显示状态，触发UI刷新
  if (hasMarkerInView != _shouldShowButton) {
    setState(() {
      _shouldShowButton = hasMarkerInView;
    });
  }
}

然后在GoogleMap组件里绑定回调和控制器：

GoogleMap(
  onMapCreated: (controller) {
    _mapController = controller;
    // 地图初始化完成后，先执行一次检查
    _checkMarkersInViewport();
  },
  onCameraIdle: () {
    // 相机停止移动后，检查标记是否在可视区域
    _checkMarkersInViewport();
  },
  markers: _markers,
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 12,
  ),
)

4. 控制按钮的显示 #

最后把你的RaisedButton（注意：新版Flutter推荐用ElevatedButton替代RaisedButton）用Visibility包裹，或者直接通过条件判断显示：

// 方式1：用Visibility组件
Visibility(
  visible: _shouldShowButton,
  child: RaisedButton(
    onPressed: () {
      // 你的按钮逻辑
    },
    child: Text('仅当有标记可见时显示'),
  ),
)

// 方式2：直接条件渲染
if (_shouldShowButton)
  RaisedButton(
    onPressed: () { /* 你的逻辑 */ },
    child: Text('仅当有标记可见时显示'),
  ),

注意事项 #

• 如果你是动态添加/删除标记，记得同步更新_markerPositions列表，然后调用_checkMarkersInViewport()刷新状态
• onCameraIdle比onCameraMove更适合这个场景，因为onCameraMove会在相机移动过程中频繁触发，可能导致不必要的性能消耗

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