FlutterMap 放大到白屏答案

【问题标题】：FlutterMap zooms into white screenFlutterMap 放大到白屏
【发布时间】：2021-01-21 18:50:10
【问题描述】：

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

适用于 Android 和 iOS。在模拟器/模拟器和发布模式下的物理设备上。适用于所有图块服务：Google、MapBox 和 OpenStreetMap。

Google Maps 和 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,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ],
  ));
}

感谢您的任何想法。

【问题讨论】：

我添加了一个 maxZoom: 18 属性，似乎阻止它进入白屏。不如谷歌地图的卫星视图特写那么近/清晰，但没关系。

标签： flutter fluttermap

【解决方案1】：

这可能是因为 FlutterMap 正在尝试为不受支持的缩放级别加载地图图块。每次缩放时，FlutterMap 都会为新的缩放级别获取图块。您应该定义一个maxZoom 属性来阻止用户过度缩放并获得白屏。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：