FlutterMap 放大到白屏

问题描述

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

发生在 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,builder: (ctx) => Container(
              child: Column(
                children: [
                  Icon(
                    Icons.location_on,size: 40,color: Colors.blue,],));
}

感谢您的任何想法。

解决方法

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

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

,

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

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