如何在 Flutter 和 Dart 中实现 Google 地图的可见性有限？

Question

我正在尝试在 Flutter 和 Dart 中实现 Google 地图项目，在这个项目中我想在 Google 地图中实现战争迷雾概念。因此，当用户在地图上时，最初他们只能看到地图的一部分，要解锁更多地图，他们必须探索这些区域以解锁可见性。

我尝试查找有关如何实现此功能的视频，但没有一个视频显示如何在 flutter 中实现此功能。我也尝试过使用 ChatGPT 并在网络上搜索，但没有成功。

Answer 1

您可以尝试将

GoogleMap

放入

Stack

中。然后，您可以将另一个小部件放入上面的堆栈中（用

IgnorePointer

小部件包裹以忽略手势事件并允许下面的地图捕获它们。

然后，使用

GoogleMap

小部件的

onCameraMove

函数（每次相机位置发生变化时都会调用该函数，并包含有关相机的方位、纬度+经度、倾斜和缩放的详细信息），您可以执行一些逻辑来确定下面的地图显示的内容，然后调整堆栈中地图顶部的小部件（可能使用

CustomPainter

）进行绘制，使其覆盖地图中未发现的部分。

您需要跟踪用户发现的区域，并具有一些逻辑来确定在给定相机详细信息的地图视口中实际可见的位置。