Flutter Map 不会改变地图图像答案

【问题标题】：Flutter Map is not changing the map imageFlutter Map 不会改变地图图像
【发布时间】：2021-02-09 02:55:20
【问题描述】：

我正在使用 flutter_map，当更新地图的经纬度时，标记会发生变化，但地图图像不会改变。

图像遵循新的纬度和经度会丢失什么？

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 Map',
      home: MyHomePage(title: 'Flutter Demo Map 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 lat;
  double long;

  @override
  void initState() {
    super.initState();
    lat = 25.7751;
    long = -80.2105;
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget> [
          new FlutterMap(
            options: new MapOptions(
              minZoom: 10.0,
              center:  new LatLng(
                lat,
                long,
              )
            ),
            layers: [
              new TileLayerOptions(
                urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a','b','c']
              ),
              new MarkerLayerOptions(
                markers: [
                  new Marker(
                    width: 45.0,
                    height: 45.0,
                    point: new LatLng(
                      lat,
                      long,
                    ),
                    builder: (context)=> new Container(
                      child: IconButton(
                        icon: Icon(Icons.add_location),
                        onPressed: () {
                          print('Marker tapped!');
                        }
                      )
                    )
                  )
                ]
              )
            ]
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            lat = 34.0898373;
            long = -118.5010028;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

flutter_map 的存储库中有一个问题：https://github.com/fleaflet/flutter_map/issues/10

确保包含最新版本的软件包。但是，如果这不起作用，那么问题的 cmets 中有一些可能的解决方案。

【讨论】：

【解决方案2】：

其实是需要用MapController来插入新的标记，改变中心。

按照代码工作：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map',
      home: MyHomePage(title: 'Flutter Demo Map Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
 
  static LatLng london = LatLng(51.5, -0.09);
  static LatLng los_angeles = LatLng(34.0522342, -118.2436849);

  MapController mapController;

  var _markers = <Marker>[];

  @override
  void initState() {
    super.initState();
    mapController = MapController();
    _markers.add(createMarker(london));
  }

  @override
  void dispose() {
    super.dispose();
  }

  Marker createMarker(LatLng latLng) {
    return Marker(
      width: 80.0,
      height: 80.0,
      point: latLng,
      builder: (ctx) => Container(
        child: IconButton(
          icon: Icon(Icons.add_location),
          onPressed: () {
            
          }
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget> [
          new FlutterMap(
            mapController: mapController,
            options: new MapOptions(
              minZoom: 0.0,
              center:  london,
            ),
            layers: [
              new TileLayerOptions(
                urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a','b','c']
              ),
              new MarkerLayerOptions(markers: _markers)
            ]
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _markers.clear();
            _markers.add(createMarker(los_angeles));
            mapController.move(los_angeles, 9.0);
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

【讨论】：