google-maps - 通过单击颤动应用程序中的卡片小部件导航到谷歌地图的位置标记

Question

我想设计一张卡片，点击它会导航到指定的标记

我从 Cloud Firestore 中获取了我的坐标（标记）。一切正常。但是当我尝试使用 pageview.builder 将我的标记与卡片链接时，它失败了。

我已经连接并从 firebase 获取所有标记：firestore。我遇到的唯一问题是我无法连接我的标记。也许在代码的末尾，我使用“Future”来指定相机在导航时的移动，并且我在 pageview.builder 之外使用了它。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:permission/permission.dart';

class Metro extends StatefulWidget {
  @override
  _MetroState createState() => _MetroState();
}
String stations;
class _MetroState extends State<Metro> {
  // GoogleMapController _controller;
  // final CameraPosition _initialPosition = CameraPosition(target: LatLng(9.0131, 38.7240), zoom: 17.0);

  LatLng _initialPosition = LatLng(9.0131, 38.7240);
  GoogleMapController _controller;
  Location _location= Location();

  int prevPage;

  PageController _pageController;

  void _onMapCreated(GoogleMapController _cntrl){
    _controller = _cntrl;
    _location.onLocationChanged.listen((l) {
      _controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(target: LatLng(l.latitude, l.longitude), zoom: 15)));
    });
  }

  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

  void initMarker(specify, specifyId) async {
    var markerIdVal = specifyId;
    final MarkerId markerId = MarkerId(markerIdVal);
    final Marker marker = Marker(
      markerId: markerId,
      draggable: false,
      position:
      LatLng(specify['Location'].latitude, specify['Location'].longitude),
      infoWindow: InfoWindow(title: specify['Name'], snippet: 'Station'),
    );
    setState(() {
      markers[markerId] = marker;
    },
    );
    _pageController = PageController(initialPage: 0, viewportFraction: 0.8)..addListener(_onScroll);
  }

  void _onScroll() {
    if (_pageController.page.toInt() != prevPage) {
      prevPage = _pageController.page.toInt();
      moveCamera();
    }
  }



  getMarkerData() async {
    Firestore.instance.collection('route 1 markers').getDocuments().then((myMockDoc) {
      if (myMockDoc.documents.isNotEmpty) {
        for (int i = 0; i < myMockDoc.documents.length; i++) {
          initMarker(myMockDoc.documents[i].data, myMockDoc.documents[i].documentID);
        }
      }
    }
    );
  }

  @override
  void initState() { enter code here
    getMarkerData();
    super.initState();
  }

   

  @override
  Widget build(BuildContext context) {
    Set<Marker> getMarker() {
      return <Marker>[
        Marker(
            markerId: MarkerId('Station'),
            position: _initialPosition,
            icon: BitmapDescriptor.defaultMarker,
            infoWindow: InfoWindow(title: 'Home'))
      ].toSet();
    }
    return Scaffold(
      // floatingActionButton: FloatingActionButton(
      //   onPressed: (){},
      //   backgroundColor: Colors.lightGreen,
      //   child: Icon(Icons.search),
      // ),
      body: Stack(
        children: [
          GoogleMap(
            markers: Set<Marker>.of(markers.values),
            mapType: MapType.normal,
            initialCameraPosition: CameraPosition(target: _initialPosition, zoom: 25),
            onMapCreated: _onMapCreated,
            myLocationEnabled: true,
            myLocationButtonEnabled: true,
            mapToolbarEnabled: false,

          ),
          Positioned(
              bottom: 20.0,
              child: Container(
                height: 200,
                width: MediaQuery.of(context).size.width,
                child: StreamBuilder<QuerySnapshot>(
                  stream: Firestore.instance.collection('route 1 markers').snapshots(),
                  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                    if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
                    switch (snapshot.connectionState) {
                      case ConnectionState.waiting:
                        return new Text('Loading...');
                      default:
                        return PageView.builder( // Changes begin here
                            controller: _pageController,
                            scrollDirection: Axis.horizontal,
                            itemCount: snapshot.data.documents.length,
                            itemBuilder: (context, index) {
                              final document = snapshot.data.documents[index];

                              return AnimatedBuilder(
                                animation: _pageController,
                                builder: (BuildContext context, Widget widget){
                                  double value = 1;
                                  if (_pageController.position.haveDimensions) {
                                    value = _pageController.page - index;
                                    value = (1 - (value.abs() * 0.3) + 0.06).clamp(0.0, 1.0);
                                  }
                                  return Center(
                                    child: SizedBox(
                                      height: Curves.easeInOut.transform(value) * 125.0,
                                      width: Curves.easeInOut.transform(value) * 350.0,
                                      child: widget,
                                    ),
                                  );
                                },
                                child: InkWell(
                                  onTap: (){moveCamera();},
                                  child: Stack(
                                    children: [
                                      Center(
                                        child: Container(
                                          margin: EdgeInsets.symmetric(
                                              horizontal: 10.0,
                                              vertical: 20.0
                                          ),
                                          height: 125,
                                          width: 270,
                                          decoration: BoxDecoration(
                                              borderRadius: BorderRadius.circular(10.0),
                                              boxShadow: [
                                                BoxShadow(
                                                  color: Colors.black54,
                                                  offset: Offset(0.0, 4.0),
                                                  blurRadius: 10.0,
                                                ),
                                              ]),
                                          child: Container(
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(10.0),
                                                color: Colors.white
                                            ),
                                            child: Row(
                                              children: [
                                                Container(
                                                    height: 90,
                                                    width: 90,
                                                    decoration: BoxDecoration(
                                                        borderRadius: BorderRadius.only(
                                                            bottomLeft: Radius.circular(10.0),
                                                            topLeft: Radius.circular(10.0)),
                                                        image: DecorationImage(
                                                            image: NetworkImage(
                                                                document['img']),
                                                            fit: BoxFit.cover))),
                                                SizedBox(width: 5.0),
                                                Column(
                                                  crossAxisAlignment: CrossAxisAlignment.start,
                                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                                  children: [
                                                    Text(
                                                      document['Name'],
                                                      style: TextStyle(
                                                          fontSize: 15,
                                                          fontWeight: FontWeight.bold),
                                                    ),
                                                    Positioned(
                                                      bottom: 5.0,
                                                      child: Text(
                                                        "Addis Ababa, Ethiopia",
                                                        style: TextStyle(
                                                            fontSize: 13.0,
                                                            fontWeight: FontWeight.w600),
                                                      ),
                                                    ),
                                                    Container(
                                                      width: 170,
                                                      child: Text(
                                                        document['Detail'],
                                                        style: TextStyle(
                                                            fontSize: 12.0,
                                                            fontWeight: FontWeight.w300),
                                                      ),
                                                    ),
                                                  ],
                                                )
                                              ],
                                            ),
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              );

                            }
                        );
                    }
                  },
                ),
              ))
        ],
      ),
    );
  }

    Future<void> moveCamera() async{
      _controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
        target: document[_pageController.page.toInt()].Location,
        zoom: 14.0,
        tilt: 45.0,
        bearing: 45.0,
      )));
    }
}

所以我需要你的帮助，请帮帮我。我发布了我的代码

标签： google-mapsflutter