flutter_map缩放不更新

Question

我正在使用flutter_map插件与OpenStreetMap作为一个提供者。我有两个按钮来更改缩放级别，这会增加/减少currentZoom变量(double)。

在我的小部件的构建覆盖中，我将按如下方式重新构建映射：

  @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=at来强制缓存更新(但是删除这个参数也不能解决问题)。

但是，当我在按钮currentZoom回调中更改onPressed级别，然后调用SetState时，页面将被重新生成，但地图缩放级别根本不会改变。

这是回调：

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

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

我漏掉了什么吗？

Answer 1

您可以复制粘贴，运行下面的完整代码

您可以使用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),
      ),
    );
  }
}