如何在颤动中设置中心（）传单地图

Question

我正在 Flutter 中制作传单地图。我构建了标记生成器以使它们动态移动。 我有一个按钮可以使地图以我确定的坐标为中心。

这是创建地图的小部件。

Widget _initMap(BuildContext context){
  return Stack(
    children: <Widget>[
      new FlutterMap(
          options: MapOptions(
            minZoom: _minzoom,
            maxZoom: _maxzoom,
            center: LatLng(mylatitude,mylongitude),
          ),
          layers: [
            new TileLayerOptions(
                urlTemplate:
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c']),
            new MarkerLayerOptions(
                markers: _generateMarker(context)
            ),
          ]
         ),
      Align(
        alignment: Alignment.bottomRight,
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: new FloatingActionButton(
            onPressed: (){_initMap(context);},
            child: Icon(Icons.gps_fixed),
          ),
        ),
      ),
    ],
  );
}

我希望按钮重新创建小部件 _initMap 以便地图将根据变量 mylatitude 和 mylongitude 重置其中心，因为这两个变量会动态变化。 有人知道怎么做吗？

Answer 1

您必须将 MapController 传递给您的 Flutter FlutterMap 小部件，并在您的 onPressed 触发器中触发控制器的 .move() 方法。

当您单击 FAB 时，以下代码可让您从初始中心移动到埃菲尔铁塔。只需在应用启动时或任何时候初始化您的地图。

MapController _mapController = MapController();

Widget _initMap(BuildContext context){
  return Stack(
    children: <Widget>[
      new FlutterMap(
          mapController: _mapController,
          options: MapOptions(
            minZoom: _minzoom,
            maxZoom: _maxzoom,
            center: LatLng(mylatitude,mylongitude),
          ),
          layers: [
            new TileLayerOptions(
                urlTemplate:
                'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c']),
            new MarkerLayerOptions(
                markers: _generateMarker(context)
            ),
          ]
         ),
      Align(
        alignment: Alignment.bottomRight,
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: new FloatingActionButton(
            onPressed: (){
              _mapController.move(LatLng(48.8587372,2.2945457), 13);
            },
            child: Icon(Icons.gps_fixed),
          ),
        ),
      ),
    ],
  );
}