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

Question

我试图在我的 google 地图屏幕中添加多个标记..但我不知道该怎么做..我在一些文章中应用了一些示例..但是我收到一个错误...这是我的部分代码...

GoogleMap(
              initialCameraPosition: const CameraPosition(
                target: LatLng(...,...),
                zoom: 18.0,
              ),
              markers: Set.of([marker]), // here I want to add multiple markers
              onMapCreated: _onMapCreated,
)

有添加多个标记的简单方法吗？

这里是标记的代码

void loc(LocationData a) {
    LatLng latlng = LatLng(a.latitude, a.longitude);
    this.setState(() {
      marker = Marker(
        markerId: MarkerId("mine"),
        position: latlng,
        icon: BitmapDescriptor.defaultMarker,
        draggable: false,
        zIndex: 1,
      );
    });
  }

Answer 1

google_maps_flutter 提供了添加多个标记的示例：place marker，您应该检查一下：

  void _add() {
    final int markerCount = markers.length;

    if (markerCount == 12) {
      return;
    }

    final String markerIdVal = 'marker_id_$_markerIdCounter';
    _markerIdCounter++;
    final MarkerId markerId = MarkerId(markerIdVal);

    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(
        center.latitude + sin(_markerIdCounter * pi / 6.0) / 20.0,
        center.longitude + cos(_markerIdCounter * pi / 6.0) / 20.0,
      ),
      infoWindow: InfoWindow(title: markerIdVal, snippet: '*'),
      onTap: () {
        _onMarkerTapped(markerId);
      },
      onDragEnd: (LatLng position) {
        _onMarkerDragEnd(markerId, position);
      },
    );

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

更新：

GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: const CameraPosition(
                target: LatLng(-33.852, 151.211),
                zoom: 11.0,
              ),
              // TODO(iskakaushik): Remove this when collection literals makes it to stable.
              // https://github.com/flutter/flutter/issues/28312
              // ignore: prefer_collection_literals
              markers: Set<Marker>.of(markers.values),
            ),

void loc(LocationData a) {
    LatLng latlng = LatLng(a.latitude, a.longitude);
     final Marker marker = Marker(
        markerId: MarkerId("mine"),
        position: latlng,
        icon: BitmapDescriptor.defaultMarker,
        draggable: false,
        zIndex: 1,
      );
    setState(() {
      markers[markerId] = marker;
    });
  }

Answer 2

我使用 GetX 的实现，但对所有人理解逻辑很有用：

控制器：

class MapController extends GetxController {
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{}.obs;

  @override
  void onInit() {
    super.onInit();
    generateMarkers();
  }

  generateMarkers() {
    int count = 0;
    for (var item in _markers) {
      count += 1;
      final String markerIdVal = 'marker_id_' + count.toString();
      final MarkerId markerId = MarkerId(markerIdVal);

      final Marker marker = Marker(
        markerId: markerId,
        position: LatLng(
          double.parse(item[1].toString()),
          double.parse(item[2].toString()),
        ),
        infoWindow:
            InfoWindow(title: item[0].toString(), snippet: 'Content'),
      );

      markers[markerId] = marker;
    }
  }

  final _markers = [
    [
      'Rektörlük',
      40.972877,
      29.152653,
      '/assets/img/number_1_3.png',
      'rektorluk'
    ],
    [
      'Mühendislik',
      40.972443,
      29.151457,
      '/assets/img/number_2_3.png',
      'muhendislik'
    ]
    // Continues
  ];
}

查看：

class MapView extends GetView<MapController> {
  final Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kYeditepe =
      CameraPosition(target: LatLng(40.971991, 29.152793), zoom: 17, tilt: 17);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: backAppBar(context, 'MAP'.tr),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _kYeditepe,
        markers: Set<Marker>.of(controller.markers.values),
        onMapCreated: (GoogleMapController mapController) {
          rootBundle.loadString('assets/map_styles.txt').then((string) {
            String _mapStyle = string;
            mapController.setMapStyle(_mapStyle);
            _controller.complete(mapController);
          });
        },
      ),
    );
  }

}

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

How to add multiple markers inside google maps of flutter

maps

marker

flutter

google-maps-flutter