如何在 Flutter 中将折线添加到 Google 地图应用？答案

【问题标题】：How do I add Polylines to a Google Map app in Flutter?如何在 Flutter 中将折线添加到 Google 地图应用？
【发布时间】：2020-05-20 04:17:33
【问题描述】：

我有一个正在 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 注释掉）显示没有问题，但折线没有。我看过很多关于这段代码的文章，我没有构建错误，所以我很困惑为什么什么都没有显示。

我在这里遗漏了一些非常明显的东西吗？

[编辑] -> 添加截图。坐标已添加到谷歌地图（正确），这是意料之中的。

【问题讨论】：

你是如何调试的？
-2, 53 和 53, -2 都是有效的纬度/经度坐标。这完全取决于您的用例中的哪一个……但-2, 53 位于印度洋中部。 KML 文件以及 geoJSON - 如果我没记错的话 - 使用 longitude, latitude 对，而 Google 地图使用 latitude, longitude。

标签： google-maps flutter dart kml polyline

【解决方案1】：

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

-2.2346792602577352,53.46763821573774,0

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

53.46763821573774, -2.2346792602577352

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

【讨论】：