使用 MapSVG 在 WordPress 中创建交互式地图

WordPress 的 MapSVG 插件允许您快速创建功能丰富、交互式的地图，并通过智能管理 UI 进行操作。当您需要将影响可视化到特定位置时，交互式地图是项目的常见需求。如果您已经使用 WordPress，此全面的插件可能是您生产就绪地图的解决方案。

想想您上次实施或确定范围的交互式地图。您可能会最终估计大量时间将数据从其原始来源映射到 JSON 中，以便将其连接到可视化框架，例如 D3。然后是配置用户如何与地图本身交互。这些已经是重大的开发提升。

接下来是您将如何管理地图数据的问题。它是否存放在外部文件中？是否需要定期 API 调用来获取数据？直接在网站的 WordPress 管理区域中管理此数据会容易得多，就像管理所有其他网站内容一样。无需打开代码编辑器并单独维护地图！

这些以及许多其他常见的映射功能都包含在 MapSVG 插件中，您可以使用它们创建多个独特的地图以满足您的可视化需求。我们将深入了解一下插件，并使用它在 WordPress 中构建一个基于 SVG 的交互式地图

创建新地图的选项

安装完成后，MapSVG 提供五个选项，可根据矢量、图像或 Google 地图功能创建新地图。为了本文的简洁，我将重点介绍 SVG 功能。

在该 **新建 SVG 地图** 选项中，有近 200 个地理校准和未校准的国家和地区矢量地图。此插件的免费版本，MapSVG Lite，允许网站管理员创建带有工具提示、可自定义详细信息视图的交互式地图，以及按纬度/经度坐标放置的标记。升级到付费版本（$46）可提供对以下内容的支持：地图目录、集成搜索、位置过滤器、地图区域的详细视图、与 WordPress 帖子和 Advanced Custom Fields 的集成、自定义工具提示以及 等值线地图，以及其他高级功能。

创建新地图

好的，所以我们选择创建一个新的基于 SVG 的地图。从下拉菜单中选择一个选项以创建矢量地图。只要有可能，选择地理校准地图而不是未校准地图。地理校准地图更新，并且包含区域标题。此外，它们允许您通过地理坐标（即纬度和经度）添加地图标记，或者通过输入自动转换为坐标的地址来添加地图标记。

如果使用您自己的自定义 SVG 文件，请选择 **上传 SVG** 选项。上传后，您的自定义文件将在 **新建 SVG 地图** 下拉菜单中的 user-uploads/your-file-name.svg 下可用。在将文件上传到插件的地图之前，我建议您采取一些额外的步骤来优化文件

1. 包含多个矢量路径的区域（例如夏威夷）需要在 Illustrator 中作为复合路径进行分组。在 Illustrator 中，可以通过选择相关路径，然后转到 对象 > 复合路径 > 制作（或 CMD + 8）来完成此操作。



2. 确保您的图层具有清晰、唯一的名称。图层名称将用作模板和组织目的的区域 {{id}}。
3. 接下来，在文本编辑器中打开您的 SVG 文件，并为每个路径提供一个 title 属性。这将用作模板中的区域 {{title}}。

   

id 和 title 字段是默认属性，从文件中提取以将其与各个路径关联。从插件的 最新版本（当前为 5.3.7）开始，您可以在 WordPress 管理区域中直接编辑 SVG 文件，以设置每个路径的 id 和 title 值，以及调整路径定义和绘制新路径。我个人更喜欢在 Illustrator 和代码编辑器中进行编辑，但这是您可用的一个不错的选择。

让我们通过使用插件提供的地理校准地图并使用来自 https://confs.tech 的条目来创建一个演示，以可视化今年全球范围内举办的技术会议数据（其中一部分）。

设置地图样式

现在我们已经将 SVG 文件设置好并选择使用，插件界面将打开到设置面板。在这里，我们设置地图名称，定义大小尺寸，并启用工具提示，以及其他主要设置。

在设置选项卡旁边，您将看到用于控制和设置特定地图功能的选项卡。切换到下一个选项卡 **颜色**，我们将在那里设置地图主题。

如上所示，我们可以控制地图的填充和描边值，以及每个路径的各种活动状态。使用基于矢量的地图的好处！出于这个原因，如果我正在创建自定义地图文件，我更喜欢在 Illustrator 中不定义填充和描边值。但是，无法在 UI 中有效地调整描边宽度（因为这将需要编辑 SVG 并更改每个路径的值），因此最好在 Illustrator 中进行设置，然后重新上传文件。

下方是容器（例如目录、过滤器、侧边栏等）的颜色选项，以及等值线地图的最小值和最大值颜色值（稍后将详细介绍！）。容器样式也可以在主题的样式表或设置的 CSS 选项卡中全局设置。

设置地图数据

默认情况下，区域选项卡将根据所选 SVG 的路径预先填充区域，显示其 id 和 title 值。您可以根据需要编辑和创建您自己的区域字段。数据库选项卡也是如此——您可以在其中输入地图数据并将其与地图区域关联。

对于区域和数据库条目，您可以选择在 UI 中手动创建字段和内容，或从 CSV 文件上传数据。

请注意上面的屏幕截图中的最终数据集，特别是 conference_details 的自定义区域字段、会议详细信息以及用于上传图像的字段，这些图像将显示数据库中每个国家的国旗。我们可以通过将内容与地图本身分离并将其作为任何 WordPress 帖子类型的帖子数据拉入，来更进一步。这就是 Advanced Custom Fields 可以帮助您在帖子编辑器中创建该数据的字段，以及在提交的数据之间创建关系以填充地图中的值的 地方。当然，这不是必需的，但对于关注点分离而言，这是一个不错的选择。

显示地图数据

在显示地图上有关区域或数据库对象的信息时，我们必须在插件中设置一个模板。有五种类型的模板：弹出窗口、工具提示、详细视图、目录和标签。

模板接受纯文本、HTML 和 Handlebar 标记来显示区域和数据库变量值。如果通过帖子数据库字段拉入帖子数据，您将可以访问标准 WordPress 字段，post.id、post.post_title、post.post_content、post.url，以及使用 Advanced Custom Fields 创建的任何自定义字段，使用以下语法：post.acf.my_field_name。只要您需要呈现一个富文本字段，例如使用
post.post_content，您必须使用 Handlebars 的 {{{triple-stash}}} 语法来输出渲染的 HTML。

使用 Handlebar 语法也意味着我们可以将条件逻辑构建到模板中，根据区域和数据库值创建动态模板视图。 在 MapSVG 5.0 及更高版本中，模板选项预先填充了 HTML 注释和默认区域和数据库字段的起始标记。超级有用！

将地图添加到页面

MapSVG 包含一个短代码，用于在任何页面或帖子中嵌入地图。 在页面上放置一个 Gutenberg 短代码块，并使用地图的 ID 调用 MapSVG 以嵌入：[mapsvg id="418"]。

SVG 等于 418 在方括号内。” />

对于在经典 WordPress 编辑器中或使用早于 5.0 的插件版本的用户，将在 TinyMCE 工具栏中添加一个地图图标，该图标将向您的帖子内容中注入包含地图 ID 的短代码。 地图 ID 可以在 MapSVG 编辑器仪表板或活动地图的顶部面包屑中找到。 在这两个短代码实例旁边都包含一个方便的“复制到剪贴板”按钮，以便将其复制到帖子编辑器中使用。

演示

数据条目完成后，并切换了几个额外的 MapSVG 设置，我们就拥有了一个功能齐全的交互式且响应式地图！ 而且请注意，在此过程中我们几乎没有接触到多少代码。

查看完整演示

超越地图

插件的 SVG 功能最棒的一点是，从本质上来说，SVG 可以是我们想要的任何东西。 你可以从几乎任何东西的矢量路径创建交互式“地图”：建筑平面图、信息图表，或者可能是你职业生涯的交互式时间轴？ 它不仅仅是地图！

不在 WordPress 上？ 没问题。 MapSVG 也 作为 jQuery 插件提供，同样值得尝试，可以在 WordPress 之外创建交互式地图。

资源

• MapSVG 网站（包含管理员的实时演示）
• MapSVG 教程
• MapSVG 文档
• MapSVG Lite（WordPress 插件目录）
• MapSVG 视频教程存档（YouTube）