FlutterMap放大到白屏

Question

在地图上放大时，它会在末尾创建一个白屏。有人知道为什么吗？

在安卓和iOS上都会发生这种情况。在模拟器/模拟器和处于释放模式的物理设备上。所有的磁贴服务都会发生这种情况:谷歌、MapBox和OpenStreetMap。

谷歌地图和MapBox包不会出现这种情况，但它们都非常慢，当在显示它们的页面上滚动时，它们都会不断地颠倒列表视图。

此gif显示了发生的情况：

​

​

下面是我的最小代码示例：

Widget build(BuildContext context) {
  return Scaffold(
      body: FlutterMap(
    options: MapOptions(
      center: LatLng(routeLat, routeLong),
      zoom: 17.0,
    ),
    layers: [
      TileLayerOptions(
        urlTemplate:
            mapStringAndKey
      ),
      MarkerLayerOptions(
        markers: [
          Marker(
            width: 150.0,
            height: 100.0,
            point: LatLng(routeLat, routeLong),
            builder: (ctx) => Container(
              child: Column(
                children: [
                  Icon(
                    Icons.location_on,
                    size: 40,
                    color: Colors.blue,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ],
  ));
}

谢谢你的任何想法。

Answer 1

这可能是因为FlutterMap试图为不支持的缩放级别加载地图分片。每次缩放时，FlutterMap都会获取新缩放级别的平铺。您应该定义一个maxZoom属性，以防止用户过度缩放并获得白屏。

FlutterMap(
   options: MapOptions(
      maxZoom: // your maxZoom value
   ),
   // ...
)

Answer 2

谷歌提供了最大和最小缩放，这可能是正确的，但使用MapBox或FlutterMap地图只是放大效果更好。

我最终在全屏页面中使用了MapBox包https://pub.dev/packages/mapbox_gl，它不会像在滚动视图中那样影响滚动，我将在滚动视图中使用静态图像或flutter_map，以确保滚动视图的速度，并将用户从那里重定向到地图。