Question

我在向Google_map_flutter添加折线时遇到问题。

我在我的项目中添加了该软件包，并在课程中实例化了googlemap。一切都很好，我在设备上看到了一张Google地图。

我在构建googlemap中添加了折线，很好，我看到了折线。

但是如何在地图已经构建时添加折线？

我尝试了此操作，但我的折线未显示。

我的代码：

void aPolyline()
{
    Log.printLogDebug("APOLYLINE()");

    List<LatLng> latLngList = List();
    LatLng _one = LatLng(43.623880, 3.898790);
    LatLng _two = LatLng(43.623880, 3.91256);
    LatLng _three = LatLng(43.56325, 3.898790);
    LatLng _four = LatLng(43.53214, 3.872365);


    latLngList.add(_one);
    latLngList.add(_two);
    latLngList.add(_three);
    latLngList.add(_four);

    Polyline po =  Polyline(
                polylineId: PolylineId('test'),
                visible: true,
                points: latLngList,
                color: Colors.blue,
                width: 2,

            );



    setState(() 
    {          
         _polyline.add(po);
    });        
}

感谢您的帮助。

Answer 1

您是否使用相同的PolylineId？尝试使用其他PolylineId。

您还可以发布整个StatefulWidget代码，以便我们进行检查。

Answer 2

否，我不使用相同的PolylineId，因为我只想看到一条Polyline。当她对Googlemap构建进行实例化时，我看到了折线，当我通过某种方法（因此在构建后）实例化Polyline时，突然看到了折线。

GoogleMapW的所有代码（小部件为W）：

class GoogleMapsW extends StatefulWidget
{
    void addPolyline() => _GoogleMapsW().ap();

    _GoogleMapsW createState() => _GoogleMapsW();

}


class _GoogleMapsW extends State<GoogleMapsW>
{
    // Le "completer" permet de charger un widget async Future. 
    Completer<GoogleMapController> _controller = Completer();
    //GoogleMapController _controller ;

    // Icone du floatingButton
    IconData _iconFloating = Icons.filter_none;
    // Type de map affichée
    MapType _typeMap = MapType.normal;

    // Position initiale de la caméra sur la map
    final CameraPosition _initCameraPosition = CameraPosition(
        target: LatLng(43.623880, 3.898790),
        zoom: 18.0,
    );


    Set<Polyline> _polyline;


    @override
    Widget build(BuildContext context)
    {
        return Stack(
            children: <Widget>
            [
                GoogleMap(
                    polylines: _polyline,
                    mapType: _typeMap,
                    initialCameraPosition: _initCameraPosition,
                    onMapCreated: aPolyline,
                    // onMapCreated: (GoogleMapController controller)
                    // {
                    //     _controller.complete((controller));
                    // },
                ),
                // Espacement entre le bouton et le bord de l'écran
                Padding(
                    padding: EdgeInsets.all(16.0),
                    // Widget d'alignement
                    child: Align(
                        alignment: Alignment.bottomRight,
                        // Bouton de modification de la carte affichée
                        child: FloatingActionButton(
                            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            child: Icon(_iconFloating,),
                            onPressed: () { _iconFloatingButton(context); }
                        ),
                    ),
                ),
            ],
        );
    }


    /// 
    /// Evènement d'appui sur le bouton de la carte.
    /// Switche le type de carte affichée.
    /// 
    void _iconFloatingButton(BuildContext context)
    {
        if (mounted)
        {
            setState(()
            {
                // Si la carte affichée est de type normal, on affiche une vue satellite
                if (_iconFloating == Icons.filter_none) 
                {
                    _iconFloating = Icons.satellite;
                    _typeMap = MapType.hybrid;
                }
                // Sinon c'est la carte de type satellite qui esr affichée, on remet l mode normal.
                else
                {
                    _iconFloating = Icons.filter_none;
                    _typeMap = MapType.normal;
                }
            });
        }        
    }


    Future<void> ap() async
    {
        List<LatLng> latLngList = List();
        LatLng _one = LatLng(43.623880, 3.898790);
        LatLng _two = LatLng(43.623880, 3.91256);
        LatLng _three = LatLng(43.56325, 3.898790);
        LatLng _four = LatLng(43.53214, 3.872365);

        latLngList.add(_one);
        latLngList.add(_two);
        latLngList.add(_three);
        latLngList.add(_four);

        Polyline po =  Polyline(
                    polylineId: PolylineId('test'),
                    visible: true,
                    points: latLngList,
                    color: Colors.blue,
                    width: 2,

                );

        aPolyline(await _controller.future, poly: po);        
    }


    ///
    /// Ajout d'une polyline
    /// 
    void aPolyline(GoogleMapController mapController, {Polyline poly})
    {
        Log.printLogDebug("APOLYLINE()");

        setState(() 
        {          
            _controller.complete((mapController));

            if (poly != null)
            {
                _polyline.add(poly);                    
            }
        });        
    }
}

在本课程中，当我选择浮动按钮时，他会更改地图的类型。可行。

class ViewMap extends StatefulWidget
{
    @override
    _ViewMap createState() => _ViewMap();
}

class _ViewMap extends State<ViewMap>
{    
    GoogleMapsW _googleMapsW = GoogleMapsW(); 

    @override
    Widget build(BuildContext context) 
    {
        return Scaffold(
                body:             
                Stack(
                    children: <Widget>[
                        // Carte google personnalisée.
                        _googleMapsW,

                        Center(
                            child: IconButton(
                                 icon: Icon(Icons.flag),
                                 onPressed: () { _googleMapsW.addPolyline(); },
                            ),
                        ),
                     ],
                  ),
               ),
            };
}

带有IconButton的“中心”仅用于测试addPolilyne。在我真正的解决方案中，此按钮不存在。

对不起，我的表情不好，但是我是法语，我的英语太糟糕了。

地图已经建立后，如何在googleMapFlutter上添加折线？

2 个答案: