Flutter如何绘制倍数标记答案

【问题标题】：Flutter how to draw multiples markerFlutter如何绘制倍数标记
【发布时间】：2020-05-31 08:27:19
【问题描述】：

首先，我是 Flutter 的初学者，我在 firestore（2 个地址）上有数据，我想在我的谷歌地图应用程序上用标记绘制它，当我运行我的代码时，它可以绘制一个地址，我阅读并查看一些教程，但我不知道，有什么问题？这是我的代码（我知道，我的英语很糟糕）

class MapaPage extends StatefulWidget {
  @override
  _MapaPageState createState() => _MapaPageState();
}

class _MapaPageState extends State<MapaPage> {
  GoogleMapController mapController;
  bool mapToggle = false;
  Position _currentPosition;
  Geolocator geolocator = Geolocator()..forceAndroidLocationManager;
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
  var direcciones = [];

  void _getCurrentLocation() async {
    await geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high).then((position) {
      setState(() {
        _currentPosition = position;
        mapToggle = true;
      });
    }).catchError((e) {
      print(e);
    });
  }

  void _getDirecciones() {
    Firestore.instance.collection('direcciones').getDocuments().then((doc) {
      if(doc.documents.isNotEmpty) {
        for(int i = 0; i < doc.documents.length; i++) {
          direcciones.add(doc.documents[i].data);
          _initMarker(doc.documents[i].data);
        }
      }
    });
  }

我认为问题出在函数 _initMarker 上。

  void _initMarker(Map<String, dynamic> direccion) {
    final MarkerId markerId = MarkerId(direccion['codigo_cliente']);
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(direccion['latitud'], direccion['longitud']),
      infoWindow: InfoWindow(
        title: direccion['codigo_cliente'],
        snippet: direccion['direccion'],
      ),
    );
    setState(() {
      markers[markerId] = marker;
    });
  }

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

  @override
  Widget build(BuildContext context) {
   return Scaffold(
      appBar: AppBar(
        title: Text('${mapToggle}'),
      ),
      body: Stack(
        children: <Widget>[
          mapToggle ?
          GoogleMap(
            mapType: MapType.normal,
            initialCameraPosition: CameraPosition(
                target: LatLng(_currentPosition.latitude, _currentPosition.longitude),               zoom: 10.0
            ),
            onMapCreated: onMapController,
            compassEnabled: true,
            markers: Set<Marker>.of(markers.values),
          ):
          LoadingUtil()
        ],
      ),
    );
  }

  void onMapController(GoogleMapController controller) {
    setState(() {
      mapController = controller;
    });
  }
}

【问题讨论】：

标签： google-maps flutter

【解决方案1】：

尝试使用Set<Marker> markers = {} 而不是Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

然后尝试这个 initMarker 方法

void _initMarker(Map<String, dynamic> direccion) {
    marker.add(
        Marker(
          markerId: MarkerId(UniqueKey().toString()),
          position: LatLng(direccion['latitud'], direccion['longitud']),
          infoWindow: InfoWindow(
              title: direccion['codigo_cliente'],
              snippet: direccion['direccion'],
          ),
        )
    );
}

并像这样在 GoogleMap 小部件中设置标记

GoogleMap(
   mapType: MapType.normal,
   initialCameraPosition: CameraPosition(
   target: LatLng(_currentPosition.latitude, _currentPosition.longitude),               zoom: 10.0
   ),
   onMapCreated: onMapController,
   compassEnabled: true,
   markers: markers,
)

【讨论】：