google-maps - 从 JSON 文件中获取标记并显示在 Google map 上

Question

我制作了一个简单的应用程序，从 JSON 文件获取数据标记并将它们绘制在 GoogleMap 上。

我已从文件中获取标记信息并将其添加到列表 allMarkers 中。

但是当我运行我的应用程序时，它只绘制 map ，不显示标记并收到控制台通知:

flutter:抛出另一个异常:构建函数返回 null。

这是我完整的 main.dart 代码

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future _future;

  Future<String> loadString() async =>
      await rootBundle.loadString('assets/data.json');
  List<Marker> allMarkers = [];
  GoogleMapController _controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _future = loadString();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Stack(children: <Widget>[
            FutureBuilder(
              future: _future,
              builder: (context, AsyncSnapshot snapshot) {
                List<dynamic> parsedJson = jsonDecode(snapshot.data);
                allMarkers = parsedJson.map((element) {
                  return Marker(
                      markerId: MarkerId(element['id']),
                      position: LatLng(element['x'], element['y']));
                }).toList();
              },
            ),
            GoogleMap(
              initialCameraPosition:
                  CameraPosition(target: LatLng(40.7128, -74.0060), zoom: 1.0),
              markers: Set.from(allMarkers),
              onMapCreated: mapCreated,
            ),
          ]),
        ),
      ]),
    );
  }
  void mapCreated(controller) {
    setState(() {
      _controller = controller;
    });
  }
}

和我的data.json(仅用于测试)

[{
    "id": "8D5D-4CD323560F59",
    "x": 40.7128,
    "y": -74.0060
 },{
    "id": "E3E0D2C5-CB82",
    "x": 41.7128,
    "y": -75.0060
 }]

Answer 1

我不知道你为什么要使用 Stack，但你似乎不需要。

在 FutureBuilder 中添加条件始终应该像我下面的示例一样。

FutureBuilder(builder: () => Widget) 中没有返回值。在你的例子中，你只是在做一些逻辑，你还必须返回一个小部件。

解决方法:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: FutureBuilder(
            future: _future,
            builder: (context, AsyncSnapshot snapshot) {
              if (!snapshot.hasData) {
                return CircularProgressIndicator();
              }
              List<dynamic> parsedJson = jsonDecode(snapshot.data);
              allMarkers = parsedJson.map((element) {
                return Marker(
                    markerId: MarkerId(element['id']),
                    position: LatLng(element['x'], element['y']));
              }).toList();

              return GoogleMap(
                initialCameraPosition: CameraPosition(
                    target: LatLng(40.7128, -74.0060), zoom: 1.0),
                markers: Set.from(allMarkers),
                onMapCreated: mapCreated,
              );
            },
          ),
        ),
      ]),
    );
  }