如何在 google 地图上添加多个标记

Question

我正在尝试根据从 firebase 读取的坐标添加多个标记。它读取所有坐标并存储在列表中。我创建了 addMarker 函数来将标记添加到地图。但它只打印一个标记，即读取的最后一个标记坐标。谁能帮我解决这个问题，因为我是 flutter 的新手。

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'dart:async';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final textcontroller = TextEditingController();
  final databaseRef = FirebaseDatabase.instance.reference();
  Completer<GoogleMapController> _controller = Completer();
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

  double latitude = 0;
  double longitude = 0;
  var myList = [];
  List<LatLng> list = [];

  void initState() {
    super.initState();
    setState(() {
      firebaseRead();
    });
  }

  void firebaseRead() {
    databaseRef.child('Locations').onValue.listen((Event event) {
      myList = event.snapshot.value;

      setState(() {
        for (int x = 0; x < myList.length; x++) {
          double latitude = myList[x]['lat'];
          double longitude = myList[x]['long'];
          LatLng location = new LatLng(latitude, longitude);
          if (list.contains(location)) {
            list.clear();
            list.add(location);
          } else {
            list.add(location);
          }

          addMarker(list[x]);
        }
      });

    });
    //print(list);
  }

  void addMarker(loc) {
    final MarkerId markerId = MarkerId('Marker 1');

    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(loc.latitude, loc.longitude),
      infoWindow: InfoWindow(title: 'test'),
    );

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

  @override
  Widget build(BuildContext context) {
      return Scaffold(
      appBar: AppBar(
        title: Text("Firebase Demo"),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        markers: Set.of(markers.values),
        initialCameraPosition:
            CameraPosition(target: LatLng(6.9271, 79.8612), zoom: 15),
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          firebaseRead();
        },
        label: const Text('Refresh'),
        icon: const Icon(Icons.refresh),
        backgroundColor: Colors.blueAccent,
      ),
    );
  }
}

Answer 1

我正在使用google_maps_flutter: ^0.5.30这个版本你可以做一些像这个:-

List<Marker> _markers = <Marker>[];

for(var track in myList){
        if(track["latitude"] != "" && track["latitude"] != "null"){
          _markers.add(Marker(markerId: MarkerId(myList.indexOf(track).toString()),
              position: LatLng(double.parse(track["latitude"]), double.parse(track["longitude"])),
              infoWindow: InfoWindow(title: track["Name"])));
        }
      }
      
      
      GoogleMap(
          initialCameraPosition: CameraPosition(
              target: latitude == null && longitude == null
                  ? LatLng(23.022505, 72.571365)
                  : LatLng(latitude, longitude)),
          mapType: MapType.normal,
          markers: Set<Marker>.of(_markers),
          onMapCreated: _onMapCreated,
          myLocationEnabled: true,
        )

Answer 2

您总是使用一个 markerId，这意味着您正在用下一个标记覆盖前一个标记，这就是为什么总是只有一个。

对于动态标记的列表，您必须传递动态 markerId。看，修改后的代码如下：

void firebaseRead() {
    databaseRef.child('Locations').onValue.listen((Event event) {
        myList = event.snapshot.value;
        setState(() {
            for (int x = 0; x < myList.length; x++) {
              double latitude = myList[x]['lat'];
              double longitude = myList[x]['long'];
              LatLng location = new LatLng(latitude, longitude);
              if (list.contains(location)) {
                 list.clear();
                  list.add(location);
              } else {
                  list.add(location);
              }

              //Passing a dynamic marker id as the index here.
              addMarker(list[x], x);
            }
        });
    });
    //print(list);
}

//Adding Index here as an argument
void addMarker(loc, index) {
    //Making this markerId dynamic
    final MarkerId markerId = MarkerId('Marker $index');

    final Marker marker = Marker(
       markerId: markerId,
       position: LatLng(loc.latitude, loc.longitude),
       infoWindow: InfoWindow(title: 'test'),
    );

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

在这段代码中，index 的变化是从 for 循环中获取并传递给 markerId，所以现在，markerId 对于从firebaseRead().

如何在 google 地图上添加多个标记

How to add multiple markers on the google map

android

firebase

flutter

google-maps

google-maps-markers