本文介绍了使用Polyline通过google_maps_flutter插件制作自定义路线-Flutter的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
google_maps_flutter
0.5.6在GoogleMap
上添加了对Polylines
的支持.但是在我看来,没有可用的代码或文档.
google_maps_flutter
0.5.6 Added support for Polylines
on GoogleMap
.But there is no code or documentation available under my view.
存在一个名为maps_view的插件,该插件支持折线
A plugin named maps_view exists which supports polylines
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),
]));
我需要与google_maps_flutter
内置的功能相同.
I need the same function that's built-in with google_maps_flutter
.
推荐答案
在您的StatefulWidget
子类中尝试一下.
Try this in your StatefulWidget
subclass.
Map<PolylineId, Polyline> _mapPolylines = {};
int _polylineIdCounter = 1;
void _add() {
final String polylineIdVal = 'polyline_id_$_polylineIdCounter';
_polylineIdCounter++;
final PolylineId polylineId = PolylineId(polylineIdVal);
final Polyline polyline = Polyline(
polylineId: polylineId,
consumeTapEvents: true,
color: Colors.red,
width: 5,
points: _createPoints(),
);
setState(() {
_mapPolylines[polylineId] = polyline;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Maps"),
actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _add)],
),
body: GoogleMap(
initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 4.0),
polylines: Set<Polyline>.of(_mapPolylines.values),
),
);
}
List<LatLng> _createPoints() {
final List<LatLng> points = <LatLng>[];
points.add(LatLng(1.875249, 0.845140));
points.add(LatLng(4.851221, 1.715736));
points.add(LatLng(8.196142, 2.094979));
points.add(LatLng(12.196142, 3.094979));
points.add(LatLng(16.196142, 4.094979));
points.add(LatLng(20.196142, 5.094979));
return points;
}
这篇关于使用Polyline通过google_maps_flutter插件制作自定义路线-Flutter的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!