如何在Flutter中将折线添加到Google Map应用中？

Question

我有一个要在Flutter中构建的地图应用，我想添加一个校园地图，该地图最终将是远程kml文件的覆盖图。在最初的情况下，我只想在地图上显示某些内容，所以我从kml文件中获取了一些坐标，并将它们添加到列表中。

List<LatLng> building = [
    LatLng(-2.2320211911239767, 53.475459515730925),
    LatLng(-2.231763699058547, 53.47504046853617),
    LatLng(-2.231605784002795, 53.47507219654),
    LatLng(-2.2317965561189794, 53.47536812388608),
    LatLng(-2.2317697340288305, 53.47537251389184),
    LatLng(-2.231845506433501, 53.475498626591325),
  ];

我有一组类型标记和一组类型折线

final Set<Marker> _residences = {};
final Set<Polyline> _campusOverlay = {};

我的_onMapCreated方法中有此代码

setState(() {
      //Show Sample Building Marker
      /* _residences.add(
        Marker(
          markerId: MarkerId('Building'),
          position: _userLocation,
          infoWindow: InfoWindow(
              title: 'This is the title', snippet: 'This is a snippet'),
          icon: BitmapDescriptor.defaultMarker,
        ),
      );*/

      _campusOverlay.add(
        Polyline(
          polylineId: PolylineId('Building'),
          visible: true,
          points: building,
          width: 2,
          color: Colors.red,
        ),
      );
    });

在我的GoogleMap小部件中，我添加了标记和折线属性。

GoogleMap(
      onMapCreated: _onMapCreated,
      polylines: _campusOverlay,
      markers: _residences,
      ...
      ...

标记（注释为atm）显示没有问题，但折线却没有。我已经看过许多有关此代码的文章，并且没有构建错误，所以我对为什么什么都没显示感到困惑。

我在这里真的缺少明显的东西吗？

Answer 1

按照Jawwad's的答案

import 'package:google_maps_flutter/google_maps_flutter.dart';

static const LatLng _center = const LatLng(33.738045, 73.084488);
final Set<Marker> _markers = {};
final Set<Polyline>_polyline={};

//add your lat and lng where you wants to draw polyline
LatLng _lastMapPosition = _center;
List<LatLng> latlng = List();
LatLng _new = LatLng(33.738045, 73.084488);
LatLng _news = LatLng(33.567997728, 72.635997456);

latlng.add(_new);
latlng.add(_news);

//call this method on button click that will draw a polyline and markers

void _onAddMarkerButtonPressed() {
    getDistanceTime();
    setState(() {
        _markers.add(Marker(
            // This marker id can be anything that uniquely identifies each marker.
            markerId: MarkerId(_lastMapPosition.toString()),
            //_lastMapPosition is any coordinate which should be your default 
            //position when map opens up
            position: _lastMapPosition,
            infoWindow: InfoWindow(
                title: 'Really cool place',
                snippet: '5 Star Rating',
            ),
            icon: BitmapDescriptor.defaultMarker,

        ));
        _polyline.add(Polyline(
            polylineId: PolylineId(_lastMapPosition.toString()),
            visible: true,
            //latlng is List<LatLng>
            points: latlng,
            color: Colors.blue,
        ));
    });

    //in your build widget method
    GoogleMap(
    //that needs a list<Polyline>
        polylines:_polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        myLocationEnabled:true,
        onCameraMove: _onCameraMove,
        initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
        ),

        mapType: MapType.normal,

    );
}