在google地图上绘制一个网格

Question

我是新手。我想用google_map_flutter包在谷歌地图上绘制一个由许多折线组成的网格，但是网格没有出现。我创建了一个类来存储折线。这是我在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}
},
]
};
}

Answer 1

您的错误在polylineId。Id必须是唯一的，所以好的解决方法是这样的:

gridDataLines.asMap().entries.map((MapEntry entry) {
PolylineId polylineId = PolylineId("poly-${entry.key.toString}");
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: polylineId ,
color: const Color.fromARGB(255, 40, 122, 198),
points: polylineCoordinates));
});
} catch (e) {
print("Ex--- $e");
}
});

请记住，我没有编译这段代码。应该可以，但可能需要一些调整。关键是——polylineId必须是唯一的