交互式国家地图

此软件包的目的是绘制一个国家或地区的交互式地图，您可以在其中选择一个区域。

可用于绘制数据。

查看 Github

如何安装

flutter pub add interactive_country_map

或者去这里：pub.dev

演示

交互 图表

它是如何工作的？

SVG地图由几个<path>标签定义。因为它是XML，我们可以为它们中的每一个定义一个id。ID是唯一的，由ISO_3166-2定义。
当选择一个国家时，它的id将被返回。

文档

交互式地图

在代码中使用InteractiveMap来添加交互式地图。然后，从MapEntity枚举中选择您需要的地图。
您可以使用InteractiveMapTheme来自定义地图主题。

onCountryChanged将接收选定的国家/地区的代码。所有代码都由ISO_3166-2定义。

该库仅返回国家代码。您需要理解它们并调整自己的小部件。

颜色映射

您可能想为您的地区使用不同的颜色。例如，所有以A开头的国家将是蓝色的，而以B开头的国家将是红色的。

在您的交互式地图主题中添加以下代码

mappingCode: {
    ...MappingHelper.sameColor(
    Colors.green.shade300,
    [
        "FR-A",
        "FR-B",
        "FR-C",
        "FR-D",
        "FR-E",
    ],
    )
},

mappingCode接受一个Map<String, Color>，其中字符串是地区代码。
MappingHelper.sameColor是一个用于构建字典的助手。它会将一个列表映射到指定的颜色。

标记

您可以在2种标记之间进行选择

  • Marker：使用笛卡尔坐标放置标记
  • GeoMarker (待办)：使用经纬度将标记放置在地图上的正确位置

然后，您可以使用MarkerGroup来收集标记并为它们提供属性

MarkerGroup(
    borderColor: Colors.pink.shade600,
    backgroundColor: Colors.pink.shade300,
    markers: [
        Marker(x: 30, y: 40),
        GeoMarker(long: 2.294481, lat: 48.858370),
        Marker(x: 250, y: 340),
    ],
),

使用须知

此软件包依赖于MapSVG提供的资源，该资源受*知识共享署名 4.0 国际许可协议（CC BY 4.0 Deed）*的约束。这意味着在使用此软件包时，您必须遵守CC BY 4.0许可协议的条款，才能使用任何MapSVG提供的资源。

有关如何适当归属MapSVG的更多详细信息，请参阅CC BY 4.0 Deed。未能遵守许可条款可能会导致法律后果。

附加信息

在此网站下载地图：地图

有些地图缺失，我还没找到。如果您有某个国家或特殊子区域的SVG，请随时打开一个问题。