如何将折线添加到 Flutter 中的 Google 地图应用程序？

Question

我有一个在 Flutter 中构建的地图应用程序，我想添加一张校园地图，它最终将是来自远程 kml 文件的叠加层。在第一个实例中，我只想在地图上显示一些内容，所以我从那个 kml 文件中抓取了一些坐标并将它们添加到列表中。

List<LatLng> building = [
    LatLng(-2.2320211911239767, 53.475459515730925),
    LatLng(-2.231763699058547, 53.47504046853617),
    LatLng(-2.231605784002795, 53.47507219654),
    LatLng(-2.2317965561189794, 53.47536812388608),
    LatLng(-2.2317697340288305, 53.47537251389184),
    LatLng(-2.231845506433501, 53.475498626591325),
  ];

我有一组类型标记和一组类型折线

final Set<Marker> _residences = {};
final Set<Polyline> _campusOverlay = {};

我的 _onMapCreated 方法中有这段代码

setState(() {
      //Show Sample Building Marker
      /* _residences.add(
        Marker(
          markerId: MarkerId('Building'),
          position: _userLocation,
          infoWindow: InfoWindow(
              title: 'This is the title', snippet: 'This is a snippet'),
          icon: BitmapDescriptor.defaultMarker,
        ),
      );*/

      _campusOverlay.add(
        Polyline(
          polylineId: PolylineId('Building'),
          visible: true,
          points: building,
          width: 2,
          color: Colors.red,
        ),
      );
    });

在我的 GoogleMap 小部件中，我添加了标记和折线属性。

GoogleMap(
      onMapCreated: _onMapCreated,
      polylines: _campusOverlay,
      markers: _residences,
      ...
      ...

标记（注释掉 atm）显示没有问题，但折线没有。我看过很多关于这段代码的文章，而且我没有构建错误，所以我很困惑为什么什么都没有显示。

我是不是漏掉了一些很明显的东西？

[编辑] -> 添加了屏幕截图。坐标已添加到 google 地图（正确），这是预期的。

Answer 1

问题不在于代码，而在于坐标。我从我有权访问的远程 KML 文件中抓取了它们。下面是一个例子。

-2.2346792602577352,53.46763821573774,0

我已将地图限制在我所在的城市，这些坐标位于印度洋中部。这些似乎是正确的方法。

53.46763821573774, -2.2346792602577352

我无法理解的是 KML 文件目前如何在正确的位置显示叠加层。这不是我的问题的最终答案，因为我想读取这个远程 KML 文件并显示叠加层，但目前，这是我想做的事情的答案。

如何将折线添加到 Flutter 中的 Google 地图应用程序？

How do I add Polylines to a Google Map app in Flutter?

google-maps

flutter

dart

kml

polyline