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

MapSVG WordPress 插件让您能够快速且便捷地创建功能丰富的交互式地图。当您需要可视化特定位置的影响时，交互式地图是项目的常见需求。如果您已经在使用 WordPress，这款功能强大的插件可能是您制作可投入生产的地图的解决方案。

回想一下您上次实现或规划交互式地图的经历。您可能会估计需要大量时间才能将数据从原始来源映射到 JSON 中，然后将其连接到可视化框架（如 D3）。接下来是配置用户如何与地图本身交互。这些都是相当大的开发工作。

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

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

创建新地图的选项

安装后，MapSVG 提供五个选项来创建基于矢量、图像或 Google 地图功能的新地图。为了本文的目的，我将重点介绍 SVG 功能。

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

创建新地图

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

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

1. 包含多个矢量路径的区域（例如夏威夷）需要在 Illustrator 中作为复合路径进行分组。在 Illustrator 中，可以通过选择相关的路径，然后转到 对象 > 复合路径 > 创建（或 CMD 8）来完成此操作。
2. 确保您的图层具有清晰、唯一的名称。图层名称将用作模板和组织目的的区域 {{id}}。
3. 接下来，在文本编辑器中打开您的 SVG 文件，并为每个路径赋予一个 title 属性。这将用作模板中的区域 {{title}}。

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

让我们继续使用插件提供的地理校准地图并使用来自 https://www.php.cn/link/e74b103532a9337cc42f051774ac49d4 的条目来可视化今年来自世界各地的技术会议数据（部分）来创建一个演示。

设置地图样式

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

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

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

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

设置地图数据

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

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

请注意上面屏幕截图中的最终数据集，特别是会议详细信息的自定义区域字段、会议详细信息以及上传显示数据库中每个国家/地区国旗的图像的字段。我们可以通过将内容与地图本身分开并将其作为任何 WordPress 文章类型的文章数据拉入来更进一步。这就是高级自定义字段可以帮助在文章编辑器中创建这些数据的字段并将提交的数据与地图中的值关联的地方。当然，这不是必需的，但为了关注点分离，拥有此选项是很好的。

显示地图数据

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

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

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

将地图添加到页面

MapSVG 包含一个用于将地图嵌入到任何页面或文章中的简码。在页面上放置一个 Gutenberg 简码块，并使用地图 ID 调用 MapSVG 以嵌入：[mapsvg]。

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

演示

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

查看完整演示

超越地图

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

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

资源

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

以上是使用mapsvg在WordPress中创建交互式地图的详细内容。更多信息请关注PHP中文网其他相关文章！