如何用 google_maps_flutter 添加标记？

Question

我正在使用google_maps_flutter，我想知道如何在点击地图某处时添加标记。我是 flutter 新手。

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

class SearchGaragesInMapScreenMap extends StatefulWidget {
  @override
  State<SearchGaragesInMapScreenMap> createState() =>
      SearchGaragesInMapScreenMapState();
}

class SearchGaragesInMapScreenMapState
    extends State<SearchGaragesInMapScreenMap> {
  final Completer<GoogleMapController> _controller = Completer();
  LatLng _myPosition = const LatLng(-12.0316827, -77.0492965);
  BitmapDescriptor _markerIcon = BitmapDescriptor.defaultMarker;

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

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      mapType: MapType.normal,
      initialCameraPosition: CameraPosition(target: _myPosition, zoom: 15),
      onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
      },
      markers: {
        _positionMarker(
          '1',
          _myPosition.latitude,
          _myPosition.longitude,
          /*AppMarkers.myMarker, 55, 35*/
        )
      },
      zoomControlsEnabled: false,
    );
  }

  Marker _positionMarker(String id, double latitude, double longitude,
      [String iconUrl, double iconWidth = 18, double iconHeight = 40]) {
    _setMarkerIcon(iconUrl, iconWidth, iconHeight);
    log('$_markerIcon');
    return Marker(
        markerId: MarkerId(id),
        position: LatLng(latitude, longitude),
        icon: _markerIcon);
  }

  void _getMyPosition() async {
    final Position _position = await _determinePosition();
    setState(() {
      _myPosition = LatLng(_position.latitude, _position.longitude);
    });
  }

  void _setMarkerIcon(
      [String iconUrl, double iconWidth, double iconHeight]) async {
    if (iconUrl != null) {
      final BitmapDescriptor _icon = await BitmapDescriptor.fromAssetImage(
          ImageConfiguration(size: Size(iconWidth, iconHeight)), iconUrl);
      setState(() {
        _markerIcon = _icon;
      });
    }
  }
}

Future<Position> _determinePosition() async {
  bool serviceEnabled;
  LocationPermission permission;
  serviceEnabled = await Geolocator
      .isLocationServiceEnabled(); // Verifica si este disp. tiene los servicios de ubicacion habilitados
  if (!serviceEnabled) {
    return Future.error('Location services are disabled.');
  }
  permission =
      await Geolocator.checkPermission(); // El usuario de permisos de ubicación
  if (permission == LocationPermission.deniedForever) {
    return Future.error(
        'Location permissions are permantly denied, we cannot request permissions.');
  }
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission != LocationPermission.whileInUse &&
        permission != LocationPermission.always) {
      return Future.error(
          'Location permissions are denied (actual value: $permission).');
    }
  }
  return await Geolocator.getCurrentPosition();
}

这是我的代码，我从 pub.dev 页面获得的代码。如果它给我显示了设备上的地图，那么就没有问题了。

第一次在flutter中使用地图，有点迷茫。如果您有任何文档、教程或视频，那将非常有帮助。

Answer 1

您可以使用 onTap 回调。

 Set<Marker> markers = { _positionMarker(
          '1',
          _myPosition.latitude,
          _myPosition.longitude,
          /*AppMarkers.myMarker, 55, 35*/
        )};
       
  
Widget build(BuildContext context) {
    return GoogleMap(
      onTap: (position) => createCurrentMarker(position),
      mapType: MapType.normal,
      initialCameraPosition: CameraPosition(target: _myPosition, zoom: 15),
      onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
      },
      markers: markers,
      zoomControlsEnabled: false,
    );
  }


//this is your add marker function
 void createCurrentMarker(LatLng position) async {
       setState(() {
          markers.add(Marker(markerId: MarkerId('new location'), position: position
          ));
    });
  }

如何用 google_maps_flutter 添加标记？

How add marker with google_maps_flutter?

flutter

flutter-test

flutter-dependencies

flutter-layout