list - 将标记数组添加到Flutter_Map仅在移动 map 后显示

Question

在这里使用Flutter_Map。我正在从 Assets 目录中的本地json文件加载标记。 map 绘制完成后，标记加载到了我的标记数组中，但是直到我在屏幕上移动 map 后标记才显示出来。我在这里有点陌生，所以在标记加载部分一定做错了吗？

我已经尝试了几件事。当前，这是我的抖动图和标记数组代码:

class _MapWidget extends StatelessWidget {
//const so flutter doesn't rebuild it each time...

  const _MapWidget();
  // final SiteID sid = null;
  // final Sites site = null;

  @override
  Widget build(BuildContext context) {
    print("add map");
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(40.0, -120.0),
        zoom: 8.0,
      ),
      layers: [
        TileLayerOptions(
          urlTemplate:
              'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
          subdomains: ['a', 'b', 'c'],
          tileProvider: CachedNetworkTileProvider(),
        ),
        new MarkerLayerOptions(markers: _MapDataState().marker),
      ],
    );
  }
}

在_MapDataState()构造函数上加载标记数组似乎是我可以将数组共享到_MapWidget的唯一位置:

 class _MapDataState extends State<MapData> {
      List<SitesList> sl = [];
      List<SnoTelSite> sts = [];
      var marker = <Marker>[];

      _MapDataState(){
        print("map data state");
        loadSites().then((sitesdata) {
          print('Loaded Sites Asset JSON');
          //clone sitesdata into sts array
          sts..addAll(sitesdata);
          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
        });
      }

      // @override
      // initState() {
      //   print("INIT STATE");
      //   super.initState();
      // }

      //local load assets ... constants hold path snotelsitesjson
      Future<String> _loadSiteAssets() async {
        return await rootBundle.loadString(snotelsitesjson);
      }

      Future loadSites() async {
        String jsonString = await _loadSiteAssets();
        final jsonResponse = json.decode(jsonString);
        SitesList sitesList = new SitesList.fromJson(jsonResponse);
        return sitesList.sites;
      }

    //main build and screen layout
      @override
      Widget build(BuildContext context) {
        print("BUILD LAYOUT");
        return MaterialApp(
          theme: ThemeData(
            primarySwatch: Colors.cyan,
          ),
          home: Scaffold(
              appBar: AppBar(
                backgroundColor: Colors.white,
                leading: Icon(Icons.ac_unit),
                title: Text("SnoTel Map"),
                actions: <Widget>[
                  IconButton(
                    icon: Icon(Icons.favorite),
                    onPressed: () {
                      debugPrint("Favorites");
                    },
                  ),
                  IconButton(
                    icon: Icon(Icons.feedback),
                    onPressed: () {
                      debugPrint("Message sent");
                    },
                  ),
                ],
              ),
              body: _MapWidget()),
        );
      }
    }

更新!在下面@Ademir的setState()帮助之后，这正在显示加载时的标记:

更新setState():

setState(() {
        marker = marker;
      });

_MapWidget中的更改:

    const _MapWidget({this.marker});
    final List<Marker> marker;

...

    body: _MapWidget(marker: marker)),

Answer 1

首先，更改此:

    _MapDataState(){
        loadSites().then((sitesdata) {
          print('Loaded Sites Asset JSON');
          //clone sitesdata into sts array
          sts..addAll(sitesdata);
          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
        });
    }

从构造函数到 initState():

@override
initState() {
    print("INIT STATE");
    super.initState();
    loadSites().then((sitesdata) {
          print('Loaded Sites Asset JSON');
          //clone sitesdata into sts array
          sts..addAll(sitesdata);
          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
        });
}

之后，在此处添加 setState((){});:

          sts.forEach((s) {
            marker.add(
              Marker(
                point: new LatLng(double.parse(s.lat),double.parse(s.lng)),
                builder: (ctx) => _MarkerPopUp(sitename: s.name, siteelevation: s.elevation, siteid: s.siteID,),
              ),
            );
          });
          setState((){});