如何在 Flutter 地图上创建多个多边形？

Question

我正在创建我校园的交互式地图，想法是复制我在 uMaps 上所做的事情，in this link。 geojson 已下载，我正在使用它附带的坐标。

第一个多边形创建成功，但我需要在 Flutter Maps 上创建多个多边形。当尝试将更多坐标放入同一个“集合”时，会发生这种情况：

这是我的代码：

import 'dart:collection';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GMap extends StatefulWidget {
  GMap({Key key}) : super(key: key);

  @override
  _GMapState createState() => _GMapState();
}

class _GMapState extends State<GMap> {
  Set<Polygon> _polygons = HashSet<Polygon>();
  GoogleMapController _mapController;

  @override
  void initState() {
    super.initState();
    _setPolygons();
  }

  void _setPolygons() {
    List<LatLng> polygonLatLongs = List<LatLng>();
    polygonLatLongs.add(LatLng(-32.072717, -52.168965));
    polygonLatLongs.add(LatLng(-32.072618, -52.168894));
    polygonLatLongs.add(LatLng(-32.072685, -52.168761));
    polygonLatLongs.add(LatLng(-32.072633, -52.16865));
    polygonLatLongs.add(LatLng(-32.072738, -52.168564));
    polygonLatLongs.add(LatLng(-32.072793, -52.168674));
    polygonLatLongs.add(LatLng(-32.072827, -52.168696));
    polygonLatLongs.add(LatLng(-32.072931, -52.168696));
    polygonLatLongs.add(LatLng(-32.072937, -52.168551));
    polygonLatLongs.add(LatLng(-32.072996, -52.168436));
    polygonLatLongs.add(LatLng(-32.073028, -52.16846));
    polygonLatLongs.add(LatLng(-32.07305, -52.168425));
    polygonLatLongs.add(LatLng(-32.073097, -52.168452));
    polygonLatLongs.add(LatLng(-32.073072, -52.168501));
    polygonLatLongs.add(LatLng(-32.073086, -52.168521));
    polygonLatLongs.add(LatLng(-32.073044, -52.168599));
    polygonLatLongs.add(LatLng(-32.073044, -52.168947));
    polygonLatLongs.add(LatLng(-32.073084, -52.169022));
    polygonLatLongs.add(LatLng(-32.073075, -52.169038));
    polygonLatLongs.add(LatLng(-32.073097, -52.169091));
    polygonLatLongs.add(LatLng(-32.073044, -52.169129));
    polygonLatLongs.add(LatLng(-32.073014, -52.169094));
    polygonLatLongs.add(LatLng(-32.072993, -52.169106));
    polygonLatLongs.add(LatLng(-32.072925, -52.168987));
    polygonLatLongs.add(LatLng(-32.07292, -52.168834));
    polygonLatLongs.add(LatLng(-32.072827, -52.168833));
    polygonLatLongs.add(LatLng(-32.072779, -52.168863));
    polygonLatLongs.add(LatLng(-32.072717, -52.168965));
    //
    polygonLatLongs.add(LatLng(-32.075462, -52.163317));
    polygonLatLongs.add(LatLng(-32.075467, -52.163884));
    polygonLatLongs.add(LatLng(-32.075336, -52.163883));
    polygonLatLongs.add(LatLng(-32.075332, -52.163321));
    polygonLatLongs.add(LatLng(-32.075462, -52.163317));
    _polygons.add(
      Polygon(
        polygonId: PolygonId("0"),
        points: polygonLatLongs,
        fillColor: Colors.white,
        strokeWidth: 1,
      ),
    );
  }

  void _onMapCreated(GoogleMapController controller) {
    _mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Map')),
      body: Stack(
        children: <Widget>[
          GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: LatLng(-32.074692, -52.1692288),
              zoom: 14,
            ),
            polygons: _polygons,
            myLocationEnabled: true,
            myLocationButtonEnabled: true,
          ),
        ],
      ),
    );
  }
}

有人知道如何放置多个多边形，我可以在上面定义一个“onTap”吗？？

如有任何帮助、建议或指导，我们将不胜感激。

Answer 1

您不应将所有建筑物或多边形坐标放在一个 set/list 中，而应为每个建筑物或多边形坐标创建单独的 sets/list，然后您可以将它们添加到您的 Polygon 单独列出。例如：

List<LatLng> polygonLatLong1 = []; 
List<LatLng> polygonLatLong2 = []; 

_polygons.add(
  Polygon(
    polygonId: PolygonId("1"),
    points: polygonLatLong1,
    fillColor: Colors.white,
    strokeWidth: 1,
  ),
);

_polygons.add(
  Polygon(
    polygonId: PolygonId("2"),
    points: polygonLatLong2, 
    fillColor: Colors.white,
    strokeWidth: 1,
  ),
);

然后要添加一个onTap事件，你可以简单地调用Polygon对象的onTap 属性。例如：

_polygons.add(
  Polygon(
    polygonId: PolygonId("1"),
    points: polygonLatLong1,
    fillColor: Colors.white,
    strokeWidth: 1,
    onTap: (){
        // Do something
    }, 
  ),
);

Answer 2

我假设您从 api 获取数据并将其分配给模态。

然后

MyDataModal data = MyDataModal.fromJson(jsonData);


List<Polygon> myPolygons = [];

data.features.forEach((dat) {

List<LatLng> coordsToAdd = [];

data.geometry.coordinates.forEach((coordinat) {
  coordsToAdd.add(LatLng(coordinat.lat,coordinat.lng));

 });
  final color = Color.fromRGBO(Random().nextInt(255),Random().nextInt(255), Random().nextInt(255), 1);


  myPolygons.add(Polygon(polygonId:PolygonId(dat.properties.id.toString()),
    points: coordsToAdd,
    strokeColor: color,
    fillColor: color.withOpacity(0.9),
    strokeWidth: 5
  ));

});


 return PlatformMap(
        initialCameraPosition: CameraPosition(
          target: const LatLng(40.580585,29.264346208),
          zoom: 16.0,
        ),
        markers: Set<Marker>.of(
          [
            Marker(
              markerId: MarkerId(),
              position:  LatLng(40.580585,29.264346208,),
              consumeTapEvents: true,
              infoWindow: InfoWindow(
                title: 'PlatformMarker',
                snippet: "Hi I'm a Platform Marker",
              ),
              onTap: () {
                print("Marker tapped");
              },
            ),
          ],
        ),
polygons: Set<Polygon>.of(myPolygons),



        myLocationEnabled: true,
        myLocationButtonEnabled: true,
        onTap: (location) => print('onTap: $location'),
        onCameraMove: (cameraUpdate) => print('onCameraMove: $cameraUpdate'),
        compassEnabled: true,
        onMapCreated: (controller) {
        

          Future.delayed(Duration(seconds: 2)).then(
            (_) {
             /* controller.animateCamera(
                CameraUpdate.newCameraPosition(
                  const CameraPosition(
                    bearing: 270.0,
                    target: LatLng(40.580585, 29.264346208),
                    tilt: 30.0,
                    zoom: 18,
                  ),
                ),
              );*/
            },
          );
        },
      );

如何在 Flutter 地图上创建多个多边形？

How to Create Multiple Polygons on Flutter Maps?

google-maps

polygon

flutter