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

Posted 2023-03-28

【中文标题】如何在谷歌地图上添加多个标记

【英文标题】：How to add multiple markers on the google map

【发布时间】：2021-09-12 07:14:33

【问题描述】：

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

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

【问题讨论】：

这是因为您只有一个MarkerId，所以在调用markers[markerId] = marker; 后，地图markers 将始终只有一个项目

你能告诉我为所有坐标点添加markerId的方法吗？

final MarkerId markerId = MarkerId(loc.toString()); 也许？ （假设loc.toString() 返回有效的唯一String）

谢谢。它有效。

【参考方案1】：

我正在使用google_maps_flutter: ^0.5.30这个版本你可以这样做this：-

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

【参考方案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() 传递的每个标记都将不同。