Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

flutter - FlutterMap zooms into white screen

When zooming in on the map, it creates a white screen at the end. Anyone have any idea why?

Happens on both Android and iOS. On emulator/simulator and on physical device in release mode. Happens with all tile services: Google, MapBox & OpenStreetMap.

It does not happen with Google Maps and MapBox packages, but they are both so slow and janks the list view continuously when scrolling on the page where they show.

This gif shows what happens:

enter image description here

Here is a my minimal code example:

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

Thank you for any ideas.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

It is probably because FlutterMap is trying to load map tiles for an unsupported zoom level. Each time you are zooming, FlutterMap is fetching tiles for the new zoom level. You should define a maxZoom property to stop the user from zooming too much and getting a white screen.

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share

2.1m questions

2.1m answers

31 comments

46.9k users

...