0

我在将折线添加到 google_map_flutter 时遇到问题。

我在我的项目中添加了包，在课堂上实例化了一个 googlemap。一切都很好，我在我的设备上看到了谷歌地图。

我在构建 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);
    });        
}

谢谢你的帮助。

4

2 回答 2

0

不，我不使用相同的 PolylineId，因为我只想查看一条折线。当她在 Googlemap 构建中实例化时，我看到了折线，当我用一种方法（因此在构建后）实例化该折线时，她不可见。

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。在我真正的解决方案中，这个按钮不存在。

对不起，我的表达不好，但我是法国人，我的英语很糟糕。

于 2019-08-22T10:10:22.157 回答
0

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

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

于 2019-08-22T09:27:40.443 回答