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

Posted 2023-02-23

【中文标题】Flutter 的 onTap 方法打开存储在 Firestore 中的经纬度

【英文标题】：onTap method for Flutter to open longitude and latitude stored in Firestore

【发布时间】：2021-04-25 14:37:53

【问题描述】：

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

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

在 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 中的位置的屏幕，

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

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

Google 地图中的位置。

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,
      ),
    );
    
  

【参考方案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，所以我不确定您的目标到底是什么。

【讨论】：

我在firestore中保存了纬度和经度，但我需要获取它们并将数据从一个窗口移动到另一个窗口，以便我可以使用它们，我不知道该怎么做使用这些坐标并将它们发送到 Google 地图窗口并访问该位置的标记。首先，我需要弄清楚如何将位置数据从一个窗口传递到另一个窗口。

要从 Firebase 中检索它们，您需要查看 Firebase 库以了解如何检索数据。如果您在点击处理程序中执行此操作，您可以使其异步并进行网络调用final coordinates = await getFromFirebase()，然后将这些值传递给您的小部件。根据您写的内容，我假设您有一个完整的单独页面要访问。在那里你可以使用 Flutter Navigator。看看如何在文档中构建路线。然后，您可以将您的坐标作为RouteSettings 的一部分传递给您的接收小部件。