如何在Google地图Flutter上添加多个标记？

Question

当用户在地图上长按时如何添加多个标记。在这段代码中，我已经完成了单一地图添加一个标记的操作，但是我不知道如何在地图上添加多个标记。我尝试了很多代码，但是没有得到合适的结果。希望您能理解我的问题。您的帮助将使我的一天更加美好。谢谢。

以下是我尝试的代码：)

import 'package:flutter/material.dart';
import 'package:geocoder/geocoder.dart';
import 'dart:async';

import 'package:google_maps_flutter/google_maps_flutter.dart';

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

const kGoogleApiKey = "API_KEY";

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "MAP", home: BspAddressmapscreen());
  }
}

class BspAddressmapscreen extends StatefulWidget {
  BspAddressmapscreen({Key key}) : super(key: key);

  @override
  _BspAddressmapscreenState createState() => _BspAddressmapscreenState();
}

class _BspAddressmapscreenState extends State<BspAddressmapscreen> {
  final homeScaffoldKey = GlobalKey<ScaffoldState>();
  Completer<GoogleMapController> _controller = Completer();

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

  double zoomVal = 5.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {
              /*NavigationHelper.navigatetoBack(context);*/
            }),
        centerTitle: true,
        title: Text("Business Address Detail"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ],
      ),
      bottomNavigationBar: Container(
        color: Colors.transparent,
        height: 56,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new FlatButton.icon(
              icon: Icon(Icons.arrow_back_ios),
              label: Text('Show Address'),
              textColor: Colors.blue,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(7),
              ),
              onPressed: () {
                getUserLocation();
              },
            ),
          ],
        ),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            _searchbar(),
            _buildGoogleMap(context),
            _zoomminusfunction(),
            _zoomplusfunction(),
          ],
        ),
      ),
    );
  }

  getUserLocation() async {
    markers.values.forEach((value) async {
      print(value.position);
      // From coordinates
      final coordinates =
          new Coordinates(value.position.latitude, value.position.longitude);
      var addresses = await Geocoder.google(kGoogleApiKey)
          .findAddressesFromCoordinates(coordinates);

      print("Address: ${addresses.first.featureName}");
      print("Address: ${addresses.first.adminArea}");
    });
  }

  Future<void> _minus(double zoomVal) async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(target: LatLng(40.712776, -74.005974), zoom: zoomVal)));
  }

  Future<void> _plus(double zoomVal) async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(target: LatLng(40.712776, -74.005974), zoom: zoomVal)));
  }

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

  Widget _buildGoogleMap(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition:
            CameraPosition(target: LatLng(40.712776, -74.005974), zoom: 12),
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        markers: Set<Marker>.of(markers.values),
        onLongPress: (LatLng latLng) {
          // creating a new MARKER

          final MarkerId markerId = MarkerId('4544');
          final Marker marker = Marker(
            markerId: markerId,
            position: latLng,
          );

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

  Widget _searchbar() {
    return Positioned(
      top: 50.0,
      right: 15.0,
      left: 15.0,
      child: Container(
        height: 50.0,
        width: double.infinity,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0), color: Colors.white),
        child: TextField(
          decoration: InputDecoration(
            hintText: 'Enter Address',
            border: InputBorder.none,
            contentPadding: EdgeInsets.only(left: 15.0, top: 15.0),
            suffixIcon: IconButton(
              icon: Icon(Icons.search),
              //onPressed: searchandNavigate,
              onPressed: () {},
              iconSize: 30.0,
            ),
          ),
          onChanged: (val) {
            setState(() {
              // searchAddr = val;
            });
          },
        ),
      ),
    );
  }
}

- Rutvik Gumasana

---

每次触发onLongPress监听器时，您都会清除标记列表。这就是为什么您始终只能看到一个 - 最后一个 - 设置的标记。尝试将新标记添加到列表中。 - Lukas

好的，我已经移除了那个marker.clear()。现在你能帮我看看接下来该做什么吗？ - Rutvik Gumasana

您每次都使用相同的标记ID（即4544）创建标记，这就是为什么在setState绘制屏幕时每次都会替换相同的标记。 - Anirudh Bagri

好的@AnirudhBagri，你能帮我吗？因为我已经尝试过了，但没有成功。你的帮助可以让我的一天变得更美好 :) - Rutvik Gumasana

Answer 1

让我们从创建一个帮助函数开始，该函数可以创建一个新的标记并将其添加到标记地图中。

 onLongPress: (LatLng latLng) {
          // creating a new MARKER

          var markerIdVal = markers.length + 1;
          String mar = markerIdVal.toString();
          final MarkerId markerId = MarkerId(mar);
          final Marker marker = Marker(markerId: markerId, position: latLng);

          setState(() {
            markers[markerId] = marker;
          });
        },

- Anirudh Bagri

---

请帮我一下，因为我在使用Flutter方面还是有些新手，能告诉我MyWayToGenerateId()方法里面会有什么内容吗？ - Rutvik Gumasana

我需要在setState中添加return markers.length + 1吗？ - Rutvik Gumasana

编辑了我的答案并删除了创建新ID的方法。这应该有所帮助。 - Anirudh Bagri

嘿兄弟，我稍微编辑了你的答案，现在它可以正常工作 :) 非常感谢你的帮助 :) - Rutvik Gumasana

如果您觉得这个问题有用，请点赞。因为在Stack Overflow上没有类似的问题。 - Rutvik Gumasana

请问如何删除已添加的标记？ - Rutvik Gumasana

Answer 2

请查看下方代码。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_google_map/appconstant.dart';
import 'dart:async';

import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
  }

class _MyAppState extends State<MyApp> {

  Completer<GoogleMapController> _controller = Completer();

  Iterable markers = [];

  Iterable _markers = Iterable.generate(AppConstant.list.length, (index) {
    return Marker(
      markerId: MarkerId(AppConstant.list[index]['id']),
      position: LatLng(
        AppConstant.list[index]['lat'],
        AppConstant.list[index]['lon'],
      ),
      infoWindow: InfoWindow(title: AppConstant.list[index]["title"])
    );
  });



  @override
  void initState() {
    setState(() {
      markers = _markers;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          mapType: MapType.normal,
          initialCameraPosition: CameraPosition(target: LatLng(23.7985053,                          
          90.3842538), zoom: 13),
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
          markers: Set.from(markers),
        ),
      ),
    );
  }
}

另一个用于列表数据的类

appconstant.dart

class AppConstant {
  static List<Map<String, dynamic>> list = [
    {"title": "one", "id": "1", "lat": 23.7985053, "lon": 90.3842538},
    {"title": "two", "id": "2", "lat": 23.802236, "lon": 90.3700},
    {"title": "three", "id": "3", "lat": 23.8061939, "lon": 90.3771193},
  ];
}

- Jewel Rana

Answer 3

只需创建一个变量，每次创建新标记时计数并将其用作您的标记ID：

onLongPress: (LatLng latLng) {
  // creating a new MARKER


  final MarkerId markerId = MarkerId("$myId");
  final Marker marker = Marker(
    markerId: markerId,
    position: latLng,
  );

  setState(() {
    myId++;

    // adding a new marker to map
    markers[markerId] = marker;
  });
},

- Lukas

---

当我使用markers.add(marker)时，出现错误，它显示在add方法中。 - Rutvik Gumasana

The method 'add' isn't defined for the class 'Map'. Try correcting the name to the name of an existing method, or defining a method named 'add' - Rutvik Gumasana

尝试使用 markers[markerId] = marker，地图没有 add 方法。 - Anirudh Bagri

这应该可以工作。它与您接受的答案完全相同。我只使用一个计数器变量，显然必须初始化。 - Lukas

不，它没有起作用。但是非常感谢您的帮助 :) - Rutvik Gumasana

如果您觉得这个问题有用，请点赞。因为在Stack Overflow上没有类似的问题。 - Rutvik Gumasana