在谷歌Map上绘制一个网格Flutter

rm5edbpk  于 2023-03-31  发布在  Flutter
关注(0)|答案(2)|浏览(133)

我是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}
      },
    ]
  };
}
erhoui1w

erhoui1w1#

您的错误是在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必须是唯一的

ifmq2ha2

ifmq2ha22#

目前网格没有正确绘制在谷歌Map上,他们正计划改进它,按照这一点:https://github.com/what3words/w3w-dart-wrapper/tree/master/example/flutter_what3words_with_google_maps

相关问题