如何在Google Maps Flutter插件上添加Polyline？

Question

我正在使用官方Google Maps Flutter plugin来显示地图，它运作得很好，但现在我想在地图中显示一条路线，所以我使用this package为我提供了我只需要添加Polylines的路线。

Answer 1

Polyline目前（2019-01-27）在official google maps flutter plugin中不可用。但是，有两个拉取请求添加了此功能：

• 1121
• 941
• 1049

拉请求1121具有关于如何使用折线功能的示例代码。

编辑：添加了有关如何使用该功能的信息：

等待分支1121合并（如果有）到基线或克隆分支repo。一旦克隆

将packages / google_maps_flutter文件夹复制到与flutter app相同的级别，例如：

- workspace
 |_myflutterapp
   |_lib
   |_android
   |_ios
   |_pubspec.yaml
 |_google_maps_flutter

然后更改您的依赖项以指向此版本而不是正式版本，即在pubspec.yaml文件中将其更改为：

dev_dependencies:
  flutter_test:
    sdk: flutter

  google_maps_flutter:
    path: ../google_maps_flutter

然后按照google flutter library上的说明操作

google_maps_futter包中包含一个示例，该示例准确显示了如何使用折线和点按。

Answer 2

Google Maps for Flutter已经在正式版0.5.6 https://pub.dartlang.org/packages/google_maps_flutter#056中支持Polylines

Answer 3

我使用这个插件解决了同样的问题google_maps_flutter：^ 0.5.19

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,

    );
}

Answer 4

你可以使用this lib

import 'package:map_view/map_view.dart';
import 'package:map_view/polyline.dart';
...
MapView mapView = MapView();
mapView.addPolyline(Polyline('my_polyline', [
  Location(45.52309483308097, -122.67339684069155),
  Location(45.52298442915803, -122.66339991241693),
]));