flutter_map 缩放未更新

Question

我正在使用 flutter_map 插件，OpenStreetMap 作为提供者。我有两个用于更改缩放级别的按钮，increase/decrease 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 用作 canvas 的子项，这确实工作得很好。

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

但是，当我在 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),
      ),
    );
  }
}

flutter_map 缩放未更新

flutter_map zoom not updating

openstreetmap

flutter

fluttermap