firebase - Flutter 的 onTap 方法打开存储在 Firestore 中的经纬度

Question

我正在尝试为选举部分创建一个搜索引擎，一旦它找到选举

通过单击项目部分，它应该将我发送到我存储的经度和纬度

在firestore中并将其显示在Google地图上作为带有颤动的标记，但我无法创建

方法，最有效的方法是什么？

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  TextEditingController textEditingController = TextEditingController();
  final database = Firestore.instance;
  String searchString;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(30.0),
                child: Container(
                  child: TextField(
                    onChanged: (val) {
                      setState(() {
                        searchString = val.toLowerCase();
                      });
                    },
                    controller: textEditingController,
                    decoration: InputDecoration(
                        suffixIcon: IconButton(
                            icon: Icon(Icons.clear),
                            onPressed: () => textEditingController.clear()),
                        hintText: 'Buscar seccion',
                        hintStyle: TextStyle(
                            fontFamily: 'Antra', color: Colors.blueGrey)),
                  ),
                ),
              ),
              Expanded(
                child: StreamBuilder<QuerySnapshot>(
                  stream: (searchString == null || searchString.trim() == ' ')
                      ? Firestore.instance.collection('secciones').snapshots()
                      : Firestore.instance
                          .collection('secciones')
                          .where('searchIndex', arrayContains: searchString)
                          .snapshots(),
                  builder: (context, snapshot) {
                    if (snapshot.hasError) {
                      return Text('We got an error ${snapshot.error}');
                    }
                    switch (snapshot.connectionState) {
                      case ConnectionState.waiting:
                        return Text('Cargando');
                      case ConnectionState.none:
                        return Text('Error de conexion');
                      case ConnectionState.done:
                        return Text('We are done!');

                      default:
                        return new ListView(
                            children: snapshot.data.documents
                                .map((DocumentSnapshot document) {
                          return new ListTile(
                              title: Text(document['estado']),
                              onTap: () {
                                Navigator.of(context).push(
                                  MaterialPageRoute(builder: (context) {
                                    return MapsScreen(
                                    );
                                  }),
                                );
                              });
                        }).toList());
                    }
                  },
                ),
              )
            ],
          ),
        )
      ],
    ));
  }
}  

这是您应该发送存储在 Firestore 中的位置的屏幕，

但我不知道该怎么做，我从视频中获取了方法

他们教你如何显示和存储你当前的教程

谷歌地图中的位置。

class MapsScreen extends StatefulWidget{
  final String partyNumber;
  final String userId;

  const MapsScreen({Key key, this.userId, this.partyNumber}) : super(key: key);

  @override
  _MapsScreenState createState() => _MapsScreenState();
}

class _MapsScreenState extends State<MapsScreen>{
  GoogleMapController _mapController;
  Location _location = Location();
  StreamSubscription<LocationData> subscription;

  @override
  void initState(){
    super.initState();

    _initLocation();
  }

  _initLocation() async{
    var _serviceEnabled = await _location.serviceEnabled();
    if(!_serviceEnabled) {
      _serviceEnabled = await _location.requestService();
      if(!_serviceEnabled){
        return;
      }
    }

    var _permissionGranted = await _location.hasPermission();
    if(_permissionGranted == PermissionStatus.DENIED){
      _permissionGranted = await _location.requestPermission();
      if(_permissionGranted != PermissionStatus.GRANTED){
        print("Sin permisos de GPS");
        return;
      }
    }

    subscription = _location.onLocationChanged().listen((LocationData event) {
      if(_mapController != null){
        _mapController.animateCamera(
          CameraUpdate.newLatLng(
            LatLng(event.latitude, event.longitude),
          ),
        );
      }

      Firestore.instance
      .collection('seccion')
      .document(widget.partyNumber)
      .collection('people')
      .document(widget.userId)
      .setData({
        'lat': event.latitude,
        'lng': event.longitude,
      });
      print("${event.latitude}, ${event.longitude}");
    });
  }

  @override
  void dispose(){
    if(subscription != null){
      subscription.cancel();
    }

    Firestore.instance
        .collection('seccion')
        .document(widget.partyNumber)
        .collection('people')
        .document(widget.userId)
        .delete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Instituto Nacional Electoral"),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(16.879860202903764, -99.9013661857768),
          zoom: 15,
        ),
        zoomGesturesEnabled: true,
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
        onMapCreated: (controller) => _mapController = controller,
      ),
    );
    }
  }

标签： firebaseandroid-studiofluttergoogle-mapsgoogle-cloud-firestore

Answer 1

我不太确定您到底要完成什么。

我最初以为您将纬度和经度存储在 Firebase 中的某个位置，并希望在这些位置显示标记。

如果您想这样做，您需要从 Firebase 获取位置数据并将其传递到GoogleMap. 我不熟悉小部件本身，但从文档中可以看到：https ://github.com/flutter/plugins/blob/f3024731b090659edaa92d01416549c690f65678/packages/google_maps_flutter/google_maps_flutter/lib/src/google_map.dart#L112 该小部件接受一组Markers.

如果您在存储库中做了一点操作，您可以看到如何构建一个Marker. 然后您可以从 Firebase 中的位置数据构造一个或多个并将它们传递给GoogleMap小部件。

如果那是你想要完成的。您发布的代码将当前用户位置保存到 Firebase，所以我不确定您的目标到底是什么。