Dart 如何在谷歌地图颤振插件上添加多段线？

我正在使用官方地图来显示地图，它工作得非常好，但是现在我想在地图上显示一条路线，所以我使用它来提供我只需要添加地图的路线

您可以使用

多段线当前（2019-01-27）在中不可用。但是，有两个请求添加了此功能：

Pull request 1121提供了有关如何使用多段线功能的示例代码

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

要么等待分支1121合并（如果合并）到基线中，要么克隆分支。一旦克隆

将packages/google_maps_颤振文件夹复制到与您的颤振应用程序相同的级别，例如：

- 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_maps_futter软件包中包含了一个示例，它精确地显示了如何使用多段线和轻敲。

google maps for Flatter已经在官方版本0.5.6中支持多段线了。

我使用这个插件google_maps_Flatter:^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,

    );
}

import'包：google_-maps_-flatter/google_-maps_-flatter.dart'；
静态常数LatLng _中心=常数LatLng（33.738045,73.084488）；
最终集_标记={}；
最终集_折线={}；
//在要绘制多段线的位置添加lat和lng
LatLng _lastmaposition=_center；
List latlng=List（）；
LatLng新=LatLng（33.738045,73.084488）；
LatLng _news=LatLng（33.567997728,72.635997456）；
latlng.添加（_new）；
latlng.add（_news）；
//单击将绘制多段线和标记的按钮调用此方法
void _onAddMarkerButtonPressed（）{
getDistanceTime（）；
设置状态（）{
_标记。添加（标记）(
//此标记id可以是唯一标识每个标记的任何内容。
markerId:markerId（_lastmaposition.toString（）），
//_lastMapPosition是默认坐标
//地图打开时的位置
位置：_lastmaposition，
信息窗口：信息窗口(
标题：“非常酷的地方”，
片段：“五星评级”，
),
图标：BitmapDescriptor.defaultMarker，
));
_多段线。添加（多段线）(
polylineId:polylineId（_lastmaposition.toString（）），
可见：对，
//这是一份清单
要点：latlng，
颜色：颜色，蓝色，
));
});
//在构建小部件方法中
谷歌地图(
//这需要一份清单
多段线：_多段线，
标记：_标记，
onMapCreated:_onMapCreated，
myLocationEnabled:对，
onCameraMove:_onCameraMove，
initialCameraPosition:CameraPosition(
目标：_中心，
缩放：11.0，
),
mapType:mapType.normal，
);
}

这是对贾瓦德回答的扩展回答。我用过官方的谷歌地图插件

谷歌地图颤振0.5.19+2

完整的工作代码如下所示

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

class TestMapPolyline extends StatefulWidget {
  @override
  _TestMapPolylineState createState() => _TestMapPolylineState();
}

class _TestMapPolylineState extends State<TestMapPolyline> {
  final Set<Marker> _markers = {};
  final Set<Polyline> _polyline = {};

  GoogleMapController controller;

  List<LatLng> latlngSegment1 = List();
  List<LatLng> latlngSegment2 = List();
  static LatLng _lat1 = LatLng(13.035606, 77.562381);
  static LatLng _lat2 = LatLng(13.070632, 77.693071);
  static LatLng _lat3 = LatLng(12.970387, 77.693621);
  static LatLng _lat4 = LatLng(12.858433, 77.575691);
  static LatLng _lat5 = LatLng(12.948029, 77.472936);
  static LatLng _lat6 = LatLng(13.069280, 77.455844);
  LatLng _lastMapPosition = _lat1;

  @override
  void initState() {
    super.initState();
    //line segment 1
    latlngSegment1.add(_lat1);
    latlngSegment1.add(_lat2);
    latlngSegment1.add(_lat3);
    latlngSegment1.add(_lat4);

    //line segment 2
    latlngSegment2.add(_lat4);
    latlngSegment2.add(_lat5);
    latlngSegment2.add(_lat6);
    latlngSegment2.add(_lat1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        //that needs a list<Polyline>
        polylines: _polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _lastMapPosition,
          zoom: 11.0,
        ),
        mapType: MapType.normal,
      ),
    );
  }

  void _onMapCreated(GoogleMapController controllerParam) {
    setState(() {
      controller = controllerParam;
      _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: 'Awesome Polyline tutorial',
          snippet: 'This is a snippet',
        ),
      ));

      _polyline.add(Polyline(
        polylineId: PolylineId('line1'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment1,
        width: 2,
        color: Colors.blue,
      ));

      //different sections of polyline can have different colors
      _polyline.add(Polyline(
        polylineId: PolylineId('line2'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment2,
        width: 2,
        color: Colors.red,
      ));
    });
  }
}

导入“包装：颤振/材料.省道”；
导入“包：google_-maps_-flatter/google_-maps_-flatter.dart”；
类TestMapPolyline扩展StatefulWidget{
@凌驾
_TestMapPolylineState createState（）=>\u TestMapPolylineState（）；
}
类_TestMapPolylineState扩展状态{
最终集_标记={}；
最终集_折线={}；
谷歌地图控制器；
List latlngSegment1=List（）；
List latlngSegment2=List（）；
静态LatLng _lat1=LatLng（13.035606,77.562381）；
静态LatLng _lat2=LatLng（13.070632,77.693071）；
静态LatLng _lat3=LatLng（12.970387,77.693621）；
静态LatLng _lat4=LatLng（12.858433,77.575691）；
静态LatLng _lat5=LatLng（12.948029,77.472936）；
静态LatLng _lat6=LatLng（13.069280,77.455844）；
LatLng lastMapPosition=lat1；
@凌驾
void initState（）{
super.initState（）；
//线段1
latlngSegment1.添加（_lat1）；
latlngSegment1.添加（_lat2）；
latlngSegment1.添加（_lat3）；
latlngSegment1.添加（_lat4）；
//线段2
latlngSegment2.添加（_lat4）；
latlngSegment2.添加（_lat5）；
latlngSegment2.添加（_lat6）；
latlngSegment2.添加（_lat1）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：谷歌地图(
//这需要一份清单
多段线：_多段线，
标记：_标记，
onMapCreated:_onMapCreated，
initialCameraPosition:CameraPosition(
目标：_lastmaposition，
缩放：11.0，
),
mapType:mapType.normal，
),
);
}
void\u onMapCreated（谷歌地图控制器参数）{
设置状态（）{
控制器=控制器参数；
_标记。添加（标记）(
//此标记id可以是唯一标识每个标记的任何内容。
markerId:markerId（_lastmaposition.toString（）），
//_lastMapPosition是默认坐标
//地图打开时的位置
位置：_lastmaposition，
信息窗口：信息窗口(
标题：“很棒的多段线教程”，
代码片段：“这是一个代码片段”，
),
));
_多段线。添加（多段线）(
polylineId:polylineId（'line1'），
可见：对，
//这是一份清单
要点：latlngSegment1，
宽度：2，
颜色：颜色，蓝色，
));
//多段线的不同部分可以有不同的颜色
_多段线。添加（多段线）(
polylineId:polylineId（'line2'），
可见：对，
//这是一份清单
要点：latlngSegment2，
宽度：2，
颜色：颜色，红色，
));
});
}
}

那么，您是否检查了答案，找到了您要查找的内容？您建议的库使用静态映射，并且不是官方插件的一部分，但是有拉入请求

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

class TestMapPolyline extends StatefulWidget {
  @override
  _TestMapPolylineState createState() => _TestMapPolylineState();
}

class _TestMapPolylineState extends State<TestMapPolyline> {
  final Set<Marker> _markers = {};
  final Set<Polyline> _polyline = {};

  GoogleMapController controller;

  List<LatLng> latlngSegment1 = List();
  List<LatLng> latlngSegment2 = List();
  static LatLng _lat1 = LatLng(13.035606, 77.562381);
  static LatLng _lat2 = LatLng(13.070632, 77.693071);
  static LatLng _lat3 = LatLng(12.970387, 77.693621);
  static LatLng _lat4 = LatLng(12.858433, 77.575691);
  static LatLng _lat5 = LatLng(12.948029, 77.472936);
  static LatLng _lat6 = LatLng(13.069280, 77.455844);
  LatLng _lastMapPosition = _lat1;

  @override
  void initState() {
    super.initState();
    //line segment 1
    latlngSegment1.add(_lat1);
    latlngSegment1.add(_lat2);
    latlngSegment1.add(_lat3);
    latlngSegment1.add(_lat4);

    //line segment 2
    latlngSegment2.add(_lat4);
    latlngSegment2.add(_lat5);
    latlngSegment2.add(_lat6);
    latlngSegment2.add(_lat1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        //that needs a list<Polyline>
        polylines: _polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _lastMapPosition,
          zoom: 11.0,
        ),
        mapType: MapType.normal,
      ),
    );
  }

  void _onMapCreated(GoogleMapController controllerParam) {
    setState(() {
      controller = controllerParam;
      _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: 'Awesome Polyline tutorial',
          snippet: 'This is a snippet',
        ),
      ));

      _polyline.add(Polyline(
        polylineId: PolylineId('line1'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment1,
        width: 2,
        color: Colors.blue,
      ));

      //different sections of polyline can have different colors
      _polyline.add(Polyline(
        polylineId: PolylineId('line2'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment2,
        width: 2,
        color: Colors.red,
      ));
    });
  }
}