firebase - 我想使用流生成器在颤动地图（传单）中添加多个标记，但找不到工作方式

Question

我想添加更多从 cloud firestore 获得的纬度和经度标记，所以我使用了流生成器。请帮助我找到添加标记的更好方法。

它在 MapView 小部件上。

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:nativestore/config.dart';
import 'package:nativestore/loginout/auth.dart';
import 'package:latlong/latlong.dart' as latLng;
import 'package:nativestore/loginout/loginpage.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

class homePage extends StatefulWidget {
  @override
  homePageState createState() => homePageState();
}

class homePageState extends State<homePage> {
  final AuthService _auth = AuthService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: pc,
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: pc,
        animationDuration: Duration(milliseconds: 200),
        color: dc,
        buttonBackgroundColor: dc,
        items: <Widget>[
          Icon(
            Icons.map_sharp,
            size: 35,
            color: pc,
          ),
          Icon(
            Icons.list,
            size: 35,
            color: pc,
          ),
        ],
        onTap: (index) {
          //Handle button tap
        },
      ),
      body: MapView(),
    );
  }
}

class MapView extends StatefulWidget {
  @override
  _MapViewState createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  final StreamController _streamController = StreamController();

  addData() async {
    await Firestore.instance
        .collection('shopkeepers')
        .getDocuments()
        .then((value) {
      value.documents.forEach((element) {
        _streamController.sink.add(
          element.data,
        );
        print("debug-->${element.data}");
      });
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    addData();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: _streamController.stream,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Text(
                "OOPs, Error",
                style: TextStyle(color: dc, fontSize: 30),
              ),
            );
          }
          print("snap data --> ${snapshot.data}");
          return FlutterMap(
            options: MapOptions(
              center: latLng.LatLng(51.5, -0.09),
              zoom: 13.0,
            ),
            layers: [
              TileLayerOptions(
                  urlTemplate:
                      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: ['a', 'b', 'c']),
              MarkerLayerOptions(
                markers: [
                  Marker(
                    width: 80.0,
                    height: 80.0,
                    point: latLng.LatLng(
                        snapshot.data['latitude'], snapshot.data['longitude']),
                    builder: (ctx) => Container(
                      child: Icon(
                        Icons.circle,
                        size: 30,
                        color: dc,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          );
        });
  }
}

elements.data打印没有任何问题，但快照数据打印空，但最后打印数据。

标签： firebaseflutterdartgoogle-cloud-firestorestream-builder