flutter_map缩放未更新

问题描述

我正在将Flutter_map插件与OpenStreetMap用作提供程序。我有两个用于更改缩放级别的按钮，用于增加/减小currentZoom变量（两倍）。

在我的小部件的构建替代中，我正在按照以下步骤重建地图：

  @override
  Widget build(BuildContext context) {
    FlutterMap currentmap = FlutterMap(
      options: MapOptions(
        center: LatLng(latitude,longitude),onTap: (pos) {
          print(pos);
        },zoom: currentZoom,// debug: true,),layers: [
        TileLayerOptions(
          overrideTilesWhenUrlChanges: false,urlTemplate:
              "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?source=${DateTime.Now().millisecondsSinceEpoch}",subdomains: ['a','b','c'],additionalOptions: {},

，然后将currentMap用作画布的子代，它确实运行良好。

请注意，我在URL的末尾添加了一个？source =来强制更新缓存（但是删除此参数也不能解决问题）。

但是，当我在pressed回调的按钮中更改currentZoom级别，然后调用SetState时，将重建页面，但地图的缩放级别完全不变。

这是回调：

IconButton(icon: Icon(Icons.remove_circle_outline_rounded),onpressed: () => setState(() {
                              currentZoom =
                                  currentZoom < 1 ? 0 : currentZoom - 1;
                              print(currentZoom);
                            }),

在回调中，我有一些控制台日志，这些日志显示currentZoom变量已正确更新。

我想念什么吗？

解决方法

您可以在下面复制粘贴运行完整代码
您可以使用MapController并致电mapController.move(currentCenter,currentZoom)
代码段

double currentZoom = 13.0;
MapController mapController = MapController();
LatLng currentCenter = LatLng(51.5,-0.09);

void _zoom() {
    currentZoom = currentZoom - 1;
    mapController.move(currentCenter,currentZoom);
}

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: MyHomePage(title: 'Flutter Demo Home Page'),);
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double currentZoom = 13.0;
  MapController mapController = MapController();
  LatLng currentCenter = LatLng(51.5,-0.09);

  void _zoom() {
    currentZoom = currentZoom - 1;
    mapController.move(currentCenter,currentZoom);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),body: FlutterMap(
          mapController: mapController,options: MapOptions(
            center: currentCenter,onTap: (pos) {
              print(pos);
            },zoom: currentZoom,// debug: true,layers: [
            TileLayerOptions(
              overrideTilesWhenUrlChanges: false,urlTemplate:
                  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?source=${DateTime.now().millisecondsSinceEpoch}",subdomains: ['a','b','c'],additionalOptions: {},)
          ]),floatingActionButton: FloatingActionButton(
        onPressed: _zoom,tooltip: 'Zoom',child: Icon(Icons.remove_circle_outline_rounded),);
  }
}