Flutter Google Maps如何显示带边框的活动区域

Question

我正在我当前正在开发的 Flutter 项目中使用 google_maps_flutter: ^2.1.3 包，我想在应用程序的地图上显示活动区域。我尝试使用多边形显示地图上的活动区域，但无法将这些区域之外的部分绘制为不同的颜色。实际上，正是我在地图上想要的，到处都是灰色的（明确它不活跃），但某些区域将是白色的（明确它是活跃的）并被边界包围。看下图你就能明白我想要的是什么。这样一来，地图上就会出现不止一个活动区域。

注意：正如我之前提到的，我可以使用多边形获取此图像，但我无法将多边形的外部设为灰色。

Answer 1

根据马特的回答，我想出了确切的解决方案。首先，我无法绘制覆盖整个世界的多边形，而是将多边形数量增加到 2。我画了 2 个覆盖整个世界的多边形，从 0 到东，从 0 到西。我将描边宽度值设置为 0，以便这些多边形不会绘制从北极到南极的线。后来，我在孔中显示了活动区域，但由于我的行程宽度值为0，因此没有出现边框线。为了避免此事件，我创建了一个新的多边形，其填充颜色值 Colors.transparent 和相同的坐标，并将描边宽度值设置为 2。

我的示例代码如下：

 polygon.add(
      Polygon(
        fillColor: Colors.black.withOpacity(0.5),
        polygonId: const PolygonId('test'),
        holes: [if (pointsFromService.length != 0) pointsFromService],
        points: const [
          LatLng(-89, 0),
          LatLng(89, 0),
          LatLng(89, 179.999),
          LatLng(-89, 179.999),
        ],
        visible: true,
        geodesic: false,
        strokeWidth: 0,
      ),
    );
    polygon.add(
      Polygon(
        fillColor: Colors.black.withOpacity(0.5),
        polygonId: const PolygonId('test2'),
        points: const [
          LatLng(-89.9, 0),
          LatLng(89.9, 0),
          LatLng(89.9, -179.999),
          LatLng(-89.9, -179.999),
        ],
        visible: true,
        geodesic: false,
        strokeWidth: 0,
      ),
    );
    if (pointsFromService.length != 0) {
      polygon.add(
        Polygon(
          fillColor: Colors.transparent,
          strokeColor: primaryColor,
          polygonId: const PolygonId('test3'),
          points: pointsFromService,
          visible: true,
          geodesic: false,
          strokeWidth: 2,
        ),
      );
    }
  }

结果如下：（注意灰色区域覆盖了整个世界）