在谷歌地图颤振上绘制一个网格

Question

我是 Flutter 的新手。我想使用 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 必须是唯一的