Fatal编程技术网
  • dart/
  • Dart 颤振图中的迭代元素

Dart 颤振图中的迭代元素

dart flutter maps

Dart 颤振图中的迭代元素,dart,flutter,maps,Dart,Flutter,Maps,我正试图用map软件包获取颤振中的元素数组 我阅读了教程，了解如何在颤振中显示多个坐标。本教程手动添加元素，我需要使用api rest添加 我创建了一个foreach来检索数组中的所有元素，然后在列表中添加所有坐标。问题是：列表在initstate方法中重置，所以我不能为所有的Coordenate循环列表的长度 代码如下： MapController mapController; Map<String, LatLng> coords; List<Marker>

我正试图用map软件包获取颤振中的元素数组

我阅读了教程，了解如何在颤振中显示多个坐标。本教程手动添加元素，我需要使用api rest添加

我创建了一个foreach来检索数组中的所有元素，然后在列表中添加所有坐标。问题是：列表在initstate方法中重置，所以我不能为所有的Coordenate循环列表的长度

代码如下：

 MapController mapController;
  Map<String, LatLng> coords;
  List<Marker> markers;
  List<Map<String, LatLng>> listado = [];

  Future<Null> fetchPost() async {
    final response = await http.get(url);
    final responseJson = json.decode(response.body);
    for (Map user in responseJson) {
      coords.putIfAbsent("Test", () => new LatLng(user['lat'], user['long']));
      listado.add(coords);
     // print(listado.toList());
    }
  }

  @override
  void initState() {
    super.initState();
    mapController = new MapController();
    coords = new Map<String, LatLng>();
    fetchPost();
    markers = new List<Marker>();
    for (int i = 0; i < listado.length; i++) {
      print(listado[1].values.elementAt(i));
      markers.add(new Marker(
          width: 80.0,
          height: 80.0,
          point: listado[1].values.elementAt(i),
          builder: (ctx) => new Icon(Icons.home, color: Colors.red[300])));
    }
  }

  @override
  Widget build(BuildContext context) {
    return new FlutterMap(
      options: new MapOptions(
        center: new LatLng(37.7525244, 139.1650556),
        zoom: 5.0,
      ),
      mapController: mapController,
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        new MarkerLayerOptions(markers: markers)
      ],
    );
  }
}

final String url =
    'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates';

//STATES
class UserDetails {
  final String name;
  final double lat, long;

  UserDetails({this.name, this.lat, this.long});

  factory UserDetails.fromJson(Map<dynamic, dynamic> json) {
    return new UserDetails(
      name: json['name'],
      lat: json['lat'],
      long: json['long'],
    );
  }
}
在这里面我有listado数组和coords，但是我怎么能得到呢

更新2：解决方案

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:igota/screens/partials/alertmessages.dart';

class MapsPage extends StatefulWidget {
  static String tag = 'maps-page';

  @override
  MapsPageState createState() => new MapsPageState();
}

class MapsPageState extends State<MapsPage> {
  MapController mapController;
  Map<String, LatLng> coords;
  List<Marker> markers;
  List<Map<String, LatLng>> list = [];
    int _counter = 0;


  bool loading;
  Future<Null> fetchPost() async {
    list = List();
    markers = List();
    mapController = new MapController();
    coords = new Map<String, LatLng>();
    final response = await http.get(
        'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates').catchError((error) {
      print(error.toString());
      AlertMessages.general(context,'No ha sido posible acceder a los datos');
    });
    final List responseJson = json.decode(response.body) as List;
    for (Map<String, dynamic> data in responseJson) {
            _counter++;

      coords.putIfAbsent("Test $_counter", () => new LatLng(double.parse(data['lat'].toString()),  double.parse(data['long'].toString())));
     list.add(coords);
     loading=false;
    }
    return;
  }
  @override
  void initState(){
    loading = true;
    super.initState();

    fetchPost().then((data) {
      for (int i = 0; i < list.length; i++) {
        markers.add(new Marker(
            width: 80.0,
            height: 80.0,
            point: list[0].values.elementAt(i),
            builder: (ctx) => new Icon(Icons.home, color: Colors.red[300])));
      }
      setState( () { } );
    }).catchError((error) {
      print(error.toString());
      AlertMessages.general(context, 'Problemas internos de código');
    });
  }

  @override
  Widget build(BuildContext context) {
    if (loading) {
      return new Container(
          color: Colors.red[300],
          child: new Center(
            child: new CircularProgressIndicator(
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.white),
            ),
          ));
    } else {
      return new FlutterMap(
        options: new MapOptions(
          center: new LatLng(37.7525244, 139.1650556),
          zoom: 5.0,
        ),
        mapController: mapController,
        layers: [
          new TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c']),
          new MarkerLayerOptions(markers: markers)
        ],
      );
    }
  }
}

导入“包装：颤振/材料.省道”；
导入“包：颤振图/颤振图.dart”；
导入“包：latlong/latlong.dart”；
导入“dart:convert”；
将“package:http/http.dart”导入为http；
导入“package:igota/screens/partials/alertmessages.dart”；
类MapsPage扩展StatefulWidget{
静态字符串标记='maps page'；
@凌驾
MapsPageState createState（）=>新建MapsPageState（）；
}
类MapsPageState扩展了状态{
地图控制器；
地图坐标；
列出标记；
列表=[]；
int _计数器=0；
布尔加载；
Future fetchPost（）异步{
list=list（）；
markers=List（）；
mapController=新的mapController（）；
coords=新映射（）；
最终响应=等待http.get(
'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates）。catchError（（错误）{
打印（error.toString（））；
AlertMessages.general（上下文，“无任何可能的加入者a los datos”）；
});
最终列表responseJson=json.decode（response.body）作为列表；
用于（响应中的地图数据）{
_计数器++；
coords.putIfAbsent（“Test$_counter”，（）=>new LatLng（double.parse（data['lat'].toString（）），double.parse（data['long'].toString（）））；
列表。添加（coords）；
加载=假；
}
返回；
}
@凌驾
void initState（）{
加载=真；
super.initState（）；
fetchPost（）。然后（（数据）{
for（int i=0；i新图标（Icons.home，颜色：Colors.red[300]）；
}
setState（（）{}）；
}).catchError（（错误）{
打印（error.toString（））；
AlertMessages.general（上下文“código内部问题”）；
});
}
@凌驾
小部件构建（构建上下文）{
如果（装载）{
退回新货柜(
颜色：颜色。红色[300]，
孩子：新中心(
儿童：新的循环压缩机指示器(
valueColor:new AlwaysStoppedAnimation（颜色.白色），
),
));
}否则{
返回新地图(
选项：新地图选项(
中心：新拉特林（37.7525244139.1650556），
缩放：5.0，
),
mapController:mapController，
图层：[
新TileLayerOptions(
URL模板：“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”，
子域：['a'，'b'，'c']），
新MarkerLayerRoptions（标记：标记）
],
);
}
}
}
因此，当您尝试迭代时，
listado.length
的主要原因是因为您没有等待
fetchPost（）方法以完成其执行。您声明了
fetchPost（）作为未来，这意味着它异步运行

您需要做的是确保在尝试迭代
listado
时，在
fetchPost（）
上的回调方法中执行迭代。因此，您的代码应该如下所示：


fetchPost().then( (data){
  for (int i = 0; i < listado.length; i++) {
    print(listado[1].values.elementAt(i));
    markers.add(new Marker(
      width: 80.0,
      height: 80.0,
      point: listado[1].values.elementAt(i),
      builder: (ctx) => new Icon(Icons.home, color: Colors.red[300])
    ));
  }
});



fetchPost（）。然后（（数据）{
for（int i=0；i新图标（Icons.home，颜色：Colors.red[300]）
));
}
});


这样，一旦
fetchPost（）
完成，回调方法将运行，“listado”将具有最新数据

我建议您也引入一个
isLoadingData
状态，在调用
fetchPost（）
时将其设置为
true
，并在回调方法末尾设置为
false
。这样你就可以让用户知道你在后台执行某种处理，而他们不必盯着空白页看，而对正在发生的事情没有任何反馈


希望这有帮助。
使用@user8518697的答案，然后执行以下操作

-将标记初始化为
List markers=new List（）

-将
用于（int i=0；i<（responseJson.length）；i++）
而不是（responseJson中的映射用户）





我还要感谢你的代码。我已经能够使用它来显示存储在数据库中的多个标记。
我尝试了您的代码，但返回“getter迭代器在null上被调用”。我认为这是一个for问题，可能listado.length不正确。我更新了问题。

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:igota/screens/partials/alertmessages.dart';

class MapsPage extends StatefulWidget {
  static String tag = 'maps-page';

  @override
  MapsPageState createState() => new MapsPageState();
}

class MapsPageState extends State<MapsPage> {
  MapController mapController;
  Map<String, LatLng> coords;
  List<Marker> markers;
  List<Map<String, LatLng>> list = [];
    int _counter = 0;


  bool loading;
  Future<Null> fetchPost() async {
    list = List();
    markers = List();
    mapController = new MapController();
    coords = new Map<String, LatLng>();
    final response = await http.get(
        'https://my-json-server.typicode.com/tobiobi/myjasonserver/coordinates').catchError((error) {
      print(error.toString());
      AlertMessages.general(context,'No ha sido posible acceder a los datos');
    });
    final List responseJson = json.decode(response.body) as List;
    for (Map<String, dynamic> data in responseJson) {
            _counter++;

      coords.putIfAbsent("Test $_counter", () => new LatLng(double.parse(data['lat'].toString()),  double.parse(data['long'].toString())));
     list.add(coords);
     loading=false;
    }
    return;
  }
  @override
  void initState(){
    loading = true;
    super.initState();

    fetchPost().then((data) {
      for (int i = 0; i < list.length; i++) {
        markers.add(new Marker(
            width: 80.0,
            height: 80.0,
            point: list[0].values.elementAt(i),
            builder: (ctx) => new Icon(Icons.home, color: Colors.red[300])));
      }
      setState( () { } );
    }).catchError((error) {
      print(error.toString());
      AlertMessages.general(context, 'Problemas internos de código');
    });
  }

  @override
  Widget build(BuildContext context) {
    if (loading) {
      return new Container(
          color: Colors.red[300],
          child: new Center(
            child: new CircularProgressIndicator(
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.white),
            ),
          ));
    } else {
      return new FlutterMap(
        options: new MapOptions(
          center: new LatLng(37.7525244, 139.1650556),
          zoom: 5.0,
        ),
        mapController: mapController,
        layers: [
          new TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c']),
          new MarkerLayerOptions(markers: markers)
        ],
      );
    }
  }
}



fetchPost().then( (data){
  for (int i = 0; i < listado.length; i++) {
    print(listado[1].values.elementAt(i));
    markers.add(new Marker(
      width: 80.0,
      height: 80.0,
      point: listado[1].values.elementAt(i),
      builder: (ctx) => new Icon(Icons.home, color: Colors.red[300])
    ));
  }
});