如何在Flutter中设置Center()传单地图 [英] How to setCenter() leaflet map in flutter

问题描述

我正在扑朔迷离地制作传单地图.我建立了标记生成器，以使它们动态移动. 我有一个按钮可以使地图以我确定的坐标为中心.

I'm working on leaflet map in flutter. I built marker generator in order to make them move dynamically. I have a button to make the map center on my determined coordinate.

这是创建地图的小部件.

This is the widget to create map.

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重置其中心，因为这两个变量是动态变化的. 有人知道该怎么做吗?

I expect the button to recreate the widget _initMap so that the map will reset its center according to variable mylatitude and mylongitude, because those two variables change dynamically. Anyone know how to do this?

推荐答案

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

You have to pass a MapController to your Flutter FlutterMap widget and in your onPressed trigger the .move() method of the controller.

以下代码使您可以在单击FAB时从初始中心移动到埃菲尔铁塔.只需在应用启动时或需要的时候初始化地图.

The following code lets you move from the initial center to the eiffel tower, when you click the FAB. Just init your map on app start or whenever you want to.

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),
          ),
        ),
      ),
    ],
  );
}

这篇关于如何在Flutter中设置Center()传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！