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

问题描述

我正在创建我校园的交互式地图，想法是复制我在 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”？？

不胜感激任何帮助、建议或指导。

解决方法

您不应将所有建筑物或多边形坐标放在一个集合/列表中，而应为每个建筑物或多边形坐标创建单独的集合/列表，然后您可以将它们分别添加到 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,);

然后要添加 onTap 事件，您只需调用 onTap 对象的 Polygon 属性即可。例如：

_polygons.add(
  Polygon(
    polygonId: PolygonId("1"),onTap: (){
        // Do something
    },);