0

Google マップに firebase からいくつかのマーカーを追加しようとしていますが、マークが Google マップ (UI) に表示されない理由がわかりません。誰かが私を助けたり、更新されたチュートリアルを提案してくれませんか?

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

class Parkings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '...',
      home: MapSample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  final FirebaseFirestore _database = FirebaseFirestore.instance;
  Completer<GoogleMapController> _controller = Completer();
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

  void _changeMap(LatLng position) async {
    final GoogleMapController controller = await _controller.future;

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(position.latitude, position.longitude),
        zoom: 20.0,
      ),
    ));
  }

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

これは、データを取得してマーカーを作成する方法です。

  addParkings() {
    _database
        .collection('places')
        .where('name', isEqualTo: "School")
        .where('name', isEqualTo: "Theatre")
        // ignore: deprecated_member_use
        .getDocuments()
        .then((docs) {
      // ignore: deprecated_member_use
      if (docs.documents.isNotEmpty) {
        // ignore: deprecated_member_use
        for (int i = 0; i < docs.documents.length; i++) {
          // ignore: deprecated_member_use
          initMarker(docs.documents[i].data, docs.documents[i].documentID);
        }
      }
    });
  }

  void initMarker(parking, parkingid) {
    var markerIdVal = parkingid;
    final MarkerId markerId = MarkerId(markerIdVal);

    // creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(parking['Latitud'], parking['Longitud']),
      infoWindow: InfoWindow(title: parking['name']),
    );

    setState(() {
      // adding a new marker to map
      markers[markerId] = marker;
    });
  }

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(45.7936, 24.1213),
    zoom: 12.4746,
  );

ここで、マップにマーカーを追加します。

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Parking Wizard'),
        backgroundColor: Colors.deepPurpleAccent,
      ),
      body: GoogleMap(
          mapType: MapType.hybrid,
          initialCameraPosition: _kGooglePlex,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
          myLocationEnabled: true,
          markers: Set<Marker>.of(markers.values)),
      floatingActionButton: FloatingActionButton(
        onPressed: _currentLocation,
      ),
    );
  }

この関数を使用して、デバイスの現在の場所を取得します。

void _currentLocation() async {
    final GoogleMapController controller = await _controller.future;
    LocationData currentLocation;
    var location = new Location();
    try {
      currentLocation = await location.getLocation();
    } on Exception {
      currentLocation = null;
    }

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(currentLocation.latitude, currentLocation.longitude),
        zoom: 18.0,
      ),
    ));
  }
}
4

2 に答える 2