Flutter自定义标记/信息窗口

Question

我正在使用带有google_maps_flutter软件包（^ 0.5.20 + 3）的flutter，在此版本中，默认情况下您无法保持打开信息窗口或轻松添加svg图标的功能。

我想到了一种方法，它是在我希望标记出现时加载小部件，进行屏幕截图，然后图像将其传递到标记，以便它出现在地图上。

我设法在地图上获取它，但是当im在我的端点循环中添加标记时，当尝试添加下一个标记时，他们没有完成在地图上添加带有图标的标记。这样会在最后一点添加上一个标记图标。

希望您可以在这里给我一些提示。谢谢

  import 'dart:async';

  import 'dart:typed_data';
  import 'dart:ui' as ui;
  import 'package:flutter/rendering.dart';

  import 'package:flutter/material.dart';
  import 'package:intl/intl.dart';
  import 'package:google_maps_flutter/google_maps_flutter.dart';

  import 'package:flutter_svg/flutter_svg.dart';

  class ShowMapPage extends StatefulWidget {
    ShowMapPage({Key key, this.title}) : super(key: key);
    final String title;
    @override
    ShowMapPageState createState() => ShowMapPageState();
  }

  class ShowMapPageState extends State<ShowMapPage> {
  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            alignment: Alignment.topLeft,
            padding: EdgeInsets.all(0.0),
            child: Stack(children: <Widget>[
              loadMap(), //Loads the google map             
              //here i put here content 
              RepaintBoundary(
                key: _globalKey,
                child: displaySVG() //add one icon without text/rotation
              ),
            ])),
      );

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

      callRestAPI() async {
        var rec = await callTheServiceAPI();
        setState(() {
          _recorrido = rec;        
        });
        addMarkers();
      }

      displaySVG() {
        return MarkerIcon(
          nombreIcono: nombreIcono,
          rotacionIcono: rotacionIcono
        );
      }

      //Here's how i make the loop for add the markers to the map
      addMarkers() async {
        for (var i = 0; i < _recorrido.length; i++) {

          final m = _recorrido[i];
          var velocidad = m['properties']['velocidad'];
          var nombreMovil = m['properties']['nombre_movil'];
          var position = LatLng(m['geometry']['coordinates'][1], m['geometry']['coordinates'][0]);
          var rotacion = m['properties']['orientacion'];

          setState(() {
            nombreIcono = nombreMovil;
            rotacionIcono = rotacion;     
          });     

          BitmapDescriptor icon = await _capturePng(); //flechaIcon;      

          var markerId = i;
          final Marker marker = Marker(
              markerId: MarkerId(markerId.toString()),
              position: position,
              infoWindow: InfoWindow(
                title: nombreMovil,
              ),
              icon: await icon,
              onTap: () {

              }
          );
          if (this.mounted){
            setState(() {
              // adding a new marker to marker list
              print('Marker loaded');
              _markers.add(marker);
            });
          }
        }
      }

      _capturePng() async {
        try {
          print('_capturePng - Start '+DateTime.now().toString());
          inside = true;      
          RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject();
          ui.Image image = await boundary.toImage(pixelRatio: 3.0);
          ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
          Uint8List pngBytes = byteData.buffer.asUint8List();
    //    String bs64 = base64Encode(pngBytes);
          setState(() {
            //imageInMemory = pngBytes;
            inside = false;
          });
          print('_capturePng - End '+DateTime.now().toString());      
          return BitmapDescriptor.fromBytes(pngBytes);
        } catch (e) {
          print(e);
        }        
      }

    }
  }


  class MarkerIcon extends StatefulWidget {
    Function callback;
    MarkerIcon({Key key, this.callback, this.nombreIcono, this.rotacionIcono}) : super(key: key);
    String nombreIcono;
    int rotacionIcono;
    _MarkerIconState createState() => _MarkerIconState();
  }

  class _MarkerIconState extends State<MarkerIcon> {

    String iconMarker = './assets/ico_car.svg';

    @override
    Widget build(BuildContext context) {
      return Stack(
        overflow: Overflow.visible,
        fit: StackFit.loose,    
        children: <Widget>[
            label(),
            iconMarker()
        ]
      );
    }    
    label() {
      return Container(
        decoration: new BoxDecoration(
            color: Colors.red,
            borderRadius: new BorderRadius.all(Radius.circular(10.0))
        ),
        child: Text(
            widget.nombreIcono,
            style: TextStyle( 
            color: Colors.white, 
            fontSize: 12, 
            fontWeight: FontWeight.w700
          )
        ),
        padding: EdgeInsets.all(10.0)
      );
    }

    svgIcon() {
      return SvgPicture.asset(
          iconMarker,
          fit: BoxFit.fill,
          alignment: Alignment.center,
          color: Colors.red,
          height: 50.0,
          width: 50.0,
          allowDrawingOutsideViewBox: true,
      );
    }

    iconMarker() {
      return Container(
          width: 50,
          height: 50,
          alignment: FractionalOffset.center,    
          margin: EdgeInsets.only(top:35, left:0),
          padding: EdgeInsets.all(0),
          child: RotationTransition(
            turns: new AlwaysStoppedAnimation(widget.rotacionIcono / 360),
            child: svgIcon(),
          )
      );
    }

  }