1

我正在使用带有 OpenStreetMap 的 flutter_map 插件作为提供程序。我有两个用于更改缩放级别的按钮，它们增加/减少 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= 来强制更新缓存（但删除此参数也不能解决问题）。

但是，当我在按钮 onPressed 回调中更改 currentZoom 级别然后调用 SetState 时，页面会重新构建，但地图缩放级别根本没有改变。

这是回调：

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

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

我错过了什么吗？

4

1 回答 1

3

您可以在下面复制粘贴运行完整代码
您可以使用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),
      ),
    );
  }
}
于 2020-09-24T02:12:52.110 回答