我是Flutter的新手。我想使用google_map_flutter包在GoogleMap上绘制一个由许多折线组成的网格,但网格不正确。我创建了一个类,在那里我存储我的折线。这里是我在lib/main. dart上的完整代码。你认为我做错了什么?提前感谢你的帮助。:)
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class _GridSectionPageState extends State<GridSectionPage> {
late GoogleMapController mapController;
List<Polyline> polylines = [];
static const _initialPosition = CameraPosition(
target: LatLng(51.520847, -0.195521),
zoom: 30,
);
@override
void initState() {
super.initState();
_createGrid();
}
// @override
// void dispose() {
// super.dispose();
// }
Future<void> _createGrid() async {
var gridData = Jsons.gridListJson;
if (gridData['lines'] != null) {
var gridDataLines = gridData['lines'] as List;
// print(gridDataLines);
List<LatLng> polylineCoordinates = [];
for (var line in gridDataLines) {
print(line);
try {
LatLng start = LatLng(line['start']['lat'], line['start']['lng']);
LatLng end = LatLng(line['end']['lat'], line['end']['lng']);
polylineCoordinates.add(start);
polylineCoordinates.add(end);
setState(() {
polylines.add(Polyline(
width: 2, // set the width of the polylines
polylineId: const PolylineId("poly"),
color: const Color.fromARGB(255, 40, 122, 198),
points: polylineCoordinates));
});
} catch (e) {
print("Ex--- $e");
}
// break;
}
print(polylines.length);
print(polylineCoordinates);
}
}
Future<void> _onMapCreated(GoogleMapController controller) async {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: GoogleMap(
mapType: MapType.normal,
zoomControlsEnabled: true,
initialCameraPosition: _initialPosition,
onMapCreated: _onMapCreated,
polylines: polylines.toSet(),
));
}
}
class GridSectionPage extends StatefulWidget {
const GridSectionPage({Key? key}) : super(key: key);
@override
_GridSectionPageState createState() => _GridSectionPageState();
}
class Jsons {
static var gridListJson = {
"lines": [
{
"start": {"lng": -0.195646695792675, "lat": 51.52069857697283},
"end": {"lng": -0.19539523869752887, "lat": 51.52069857697283}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52072552824493},
"end": {"lng": -0.19539523869752887, "lat": 51.52072552824493}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52075247951703},
"end": {"lng": -0.19539523869752887, "lat": 51.52075247951703}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.520779430789126},
"end": {"lng": -0.19539523869752887, "lat": 51.520779430789126}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.520806382061224},
"end": {"lng": -0.19539523869752887, "lat": 51.520806382061224}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52083333333332},
"end": {"lng": -0.19539523869752887, "lat": 51.52083333333332}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52086028460542},
"end": {"lng": -0.19539523869752887, "lat": 51.52086028460542}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52088723587752},
"end": {"lng": -0.19539523869752887, "lat": 51.52088723587752}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.520914187149614},
"end": {"lng": -0.19539523869752887, "lat": 51.520914187149614}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52094113842171},
"end": {"lng": -0.19539523869752887, "lat": 51.52094113842171}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52096808969381},
"end": {"lng": -0.19539523869752887, "lat": 51.52096808969381}
},
{
"start": {"lng": -0.195646695792675, "lat": 51.52099504096591},
"end": {"lng": -0.19539523869752887, "lat": 51.52099504096591}
},
{
"start": {"lng": -0.19562955254942768, "lat": 51.52067977488272},
"end": {"lng": -0.19562955254942768, "lat": 51.521018571817656}
},
{
"start": {"lng": -0.19558619493583074, "lat": 51.52067977488272},
"end": {"lng": -0.19558619493583074, "lat": 51.521018571817656}
},
{
"start": {"lng": -0.1955428373222338, "lat": 51.52067977488272},
"end": {"lng": -0.1955428373222338, "lat": 51.521018571817656}
},
{
"start": {"lng": -0.19549947970863685, "lat": 51.52067977488272},
"end": {"lng": -0.19549947970863685, "lat": 51.521018571817656}
},
{
"start": {"lng": -0.1954561220950399, "lat": 51.52067977488272},
"end": {"lng": -0.1954561220950399, "lat": 51.521018571817656}
},
{
"start": {"lng": -0.19541276448144296, "lat": 51.52067977488272},
"end": {"lng": -0.19541276448144296, "lat": 51.521018571817656}
},
]
};
}
2条答案
按热度按时间erhoui1w1#
您的错误是在
polylineId
中。ID必须是唯一的,因此较好的解决方法如下所示:请记住,我没有编译这个代码。它应该工作,但可能需要一些调整。关键是-- polylineId必须是唯一的
ifmq2ha22#
目前网格没有正确绘制在谷歌Map上,他们正计划改进它,按照这一点:https://github.com/what3words/w3w-dart-wrapper/tree/master/example/flutter_what3words_with_google_maps