我正在使用官方的Google Maps Flutter plugin来显示地图,并且效果很好,但是现在我想在地图上显示一条路线,所以我正在使用this package来提供我唯一的路线需要添加Polylines。
答案 0 :(得分:2)
Polyline当前(2019-01-27)在official google maps flutter plugin中不可用。但是,有两个拉请求已添加了此功能:
拉取请求1121包含有关如何使用折线功能的示例代码。
编辑:添加了有关如何使用该功能的信息:
要么等待分支1121合并(如果合并)到基线中,要么克隆分支repo。克隆后
将packages / google_maps_flutter文件夹复制到与flutter应用程序相同的级别,例如:
- 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包中包含一个示例,该示例精确显示了如何使用折线和水龙头。
答案 1 :(得分:2)
Google Maps for Flutter已在官方版本0.5.6 https://pub.dartlang.org/packages/google_maps_flutter#056
中支持折线。答案 2 :(得分:1)
我使用此插件 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,
);
}
答案 3 :(得分:0)
您可以使用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),
]));
答案 4 :(得分:0)
这是对Jawad答复的扩展答案。我已经使用了官方的Google Maps插件
google_maps_flutter 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,
));
});
}
}