flutter_map_polywidget

flutter_map_polywidget 是一个 flutter_map 插件，用于在地图上显示任何小部件。

polywidget.webm

加入 flutter_map Discord 服务器，在 #plugins 频道中讨论 flutter_map_polywidget，获取帮助并帮助他人。

特点

  • 选择所需区域的位置和大小，并显示任何您想要的小部件
  • 通过以下方式定义位置：
    • 中心、宽度、高度和角度
    • 两个精确点和一个近似点
  • 定义小部件是否应随用户视图旋转，将其限制为一种方向或完全禁用旋转

入门

将 flutter_map_polywidget 添加到您的 pubspec.yaml 文件中

dependencies:
  flutter_map_polywidget: any # or latest verion

用法

首先将 PolyWidgetLayer 添加到您的地图中

FlutterMap(
  children: [
    ...
    PolyWidgetLayer(
      polyWidgets: [
        ...
      ],
    ),
  ],
),

在您的 PolyWidgetLayer 中添加 PolyWidget 小部件。PolyWidgets 可以通过两种方式创建。

首先，通过定义中心位置、宽度、高度和角度来创建小部件

PolyWidget(
  center: LatLng(50.933465, 6.875109),
  widthInMeters: 100,
  heightInMeters: 200,
  angle: 90,
  child: ...,
),

其次，通过在地图上定义所需小部件的三个角来创建。第一个和第二个角是固定的，将用于定义小部件的宽度和角度。只有当第三个角与第二个角成90°角时，它才是固定的。否则，将使用从第二个到第三个角的距离来计算实际的第三个角。所有三个角都用于计算中心位置。

PolyWidget.threePoints(
  pointA: LatLng(50.936614, 6.876283),
  pointB: LatLng(50.936498, 6.877663),
  approxPointC: LatLng(50.935312, 6.877419),
  child: ...,
),

默认情况下，您的小部件会自动旋转，使其与地图的当前旋转对齐。要禁用此功能，请将 noRotation 设置为 true。

PolyWidget(
  ...,
  noRotation: true,
  child: ...,
),

如果您希望您的小部件仅旋转到 纵向 或 横向 方向，您可以通过定义 forceOrientation 来实现。

PolyWidget(
  ...,
  forceOrientation: Orientation.landscape, //or Orientation.portrait
  child: ...,
),

您可以在 /example 目录中找到展示视频中的示例。

GitHub

查看 Github