MapSVG是一个漂亮的WordPress插件，可帮助您在WordPress网站上创建交互式和响应式地图。借助一系列出色的功能，您可以将任何SVG文件转换为交互式地图。不仅如此，您还可以创建详细的平面图，信息图，Google地图，Chloropleth地图，图像地图等等。

在这篇评论中，我们将介绍使MapSVG成为Web上WordPress最佳映射插件之一的功能  。我们还测试了插件的驱动程序，因此请坚持学习并一直阅读到最后。这绝对是一笔不错的交易，所以让自己喝杯咖啡，然后开始吧。

适用于WordPress的MapSVG交互式地图

由开发人员Roman Roman Stepanov带给您的MapSVG使创建交互式地图变得轻松而有趣。尽管我必须先阅读文档，但我还是玩得很开心。话虽如此，让我们看一下MapSVG中可用的功能。

100多个就绪地图

为了帮助您踏上第一步，MapSVG随附了100多种经过地理校准的地图。有一张世界地图，它已经细分为可点击的区域（国家）。然后，您将获得具有相应州/省的国家/地区地图。您还将获得一些特殊的地图。

由于大多数地图都是经过校准的，因此您可以使用地址或坐标将标记添加到地图中。最重要的是，您可以创建自己的SVG地图并将其上传到MapSVG。

您所要做的就是使用任何矢量编辑软件（例如Inkscape或Adobe Illustrator）创建SVG图像，上传该死的东西并进行自定义。

你知道这是什么意思吗？这意味着您可以设计交互式图表和可视化统计信息（并总体上改善用户体验）而不会向后弯腰。

数据库对象

MapSVG允许您创建对象并将其添加到地图的特定区域。这使您可以利用信息为网络访客提供身临其境的体验，丰富您的地图。

为了说明起见，让我们假设您是一家房地产经纪公司，其财产要在全国范围内出售。您做得非常好，想在地图上显示可用的属性。您想显示诸如大小，地址，价格，照片和类似信息之类的信息。

MapSVG允许您将这些详细信息添加到数据库，然后将信息附加到地图的一个或多个区域。每当用户单击您定义的区域（例如状态）时，详细信息就会显示在漂亮的弹出框，详细信息视图或工具提示中。

可过滤和可搜索目录

好像添加数据库对象还不够，MapSVG允许您创建目录并将其显示在地图旁边。与我们的房地产类比一起，您可能想要显示特定状态下可用的所有房地产（或代理商）。MapSVG使这一切成为可能。

用户可以使用下拉过滤器或搜索框过滤目录中的项目。此外，用户可以通过单击地图上的特定区域来过滤对象。此目录功能使最复杂的图和地图也易于理解。此外，用户可以轻松找到信息，这对您的UX来说是一个加号。

增强谷歌地图

我是否提到您可以将MapSVG与Google Maps集成？是的，可以，您只需要一个Google API密钥。通常，您不能广泛地自定义Google Maps，在某些情况下这是或可能会受到限制。MapSVG使您能够克服这一挑战。

怎么样？您可以在任何类型的Google地图（地形图，卫星图，道路图或混合图）上叠加矢量地图。而且由于矢量图像是交互式的，因此您可以修改Google Map直到放下。显而易见的最终结果是您能够提供更多的可用性。

请记住，谷歌地图带有一组控件。将这些控件与MapSVG功能结合使用，您会在文学上兴奋地使用户疯狂。他们会说：“他们到底是怎么做到的？” 此功能使您可以通过突出显示地标并使所有内容可单击来增强Google地图。

CSS，JavaScript和模板编辑器

您无法自定义或扩展的地图有什么用途？Roman似乎通过漂亮的CSS和JavaScript编辑器奠定了基础。只要您知道处理代码的方式，就可以将交互式插图发挥到极致。

对于初学者，您可以根据需要使用CSS设置地图样式的样式，而不会费力。您可以为工具提示，弹出窗口和其他信息容器中的许多元素设置样式。最重要的是，您可以利用JavaScript的功能来扩展默认地图功能。

此外，您还将获得一个模板编辑器，该编辑器可帮助您为弹出窗口，标记和工具提示创建自定义模板。模板编辑器易于使用，我们希望您不会遇到任何问题。

带有实时预览的直观控制面板

由于直观的管理仪表板使创建地图变得轻而易举，因此使用MapSVG非常简单。使用MapSVG创建地图和其他交互式插图从头到尾都非常容易。

最重要的是，该插件具有实时预览功能，可让您实时查看更改。现在，您不必怀疑地图完成后的外观。此外，您不必来回浏览（或刷新页面）来查看地图的外观。有多甜？

影像图

我们在几分钟前提到了图像地图，但是我不得不独自介绍此功能，因为我认为它令人印象深刻。我们已经知道MapSVG会自动将SVG文件转换为交互式地图。只需绘制一个SVG文件，上传并自定义即可。

但是您知道您也可以从PNG和JPEG图像创建地图吗？现在听起来很有趣，对吧？MapSVG带有出色的绘图工具，可让您从栅格图像创建交互式（可单击）地图。这有什么用？您可以绘制交互式房屋平面图，蓝图，路线，城市平面图，座位表等等。

得益于这些功能和出色的支持，没有什么可以阻止您从该星系中创建地图和交互式插图。由于MapSVG是适用于WordPress的废话（也许是最好的）地图插件，因此这里是无限的限制。

如何设置MapSVG和创建地图

设置MapSVG与安装任何其他典型的WordPress插件一样容易。安装并激活插件后，您就可以开始创建交互式地图了。由于MapSVG即开即用，因此您无需进行任何配置。

获取MAPSVG

让我们获得一些动手经验。获取一份MapSVG，然后按照以下说明进行操作。登录到WordPress管理仪表板，然后导航至“  插件”>“添加新的”。

接下来，按下“  上传”按钮（1），  选择“文件”（2），然后按下“  立即安装”（3）按钮，如下所示。

等待安装过程完成，然后单击“  激活插件”按钮。

就是这样；激活后即可使用该插件。单击WordPress管理员上的  MapSVG项目以启动控制面板。

到目前为止一切顺利，我想您会同意这一过程很简单。在控制台上，您可以选择一个预制地图，创建Google地图（首先需要进行集成，就像复制粘贴API密钥一样容易），构建图像地图，上传SVG文件或下载带有Google地图的SVG文件。

如果需要创建地图的帮助，请单击控制面板顶部的“ 教程”或“  支持”链接，以获取快速帮助  。让我们选择一个预先存在的地图。我会和中国一起去因为现在一切都在这里完成 ?

N / B： 开发人员建议使用经过  地理校准的  地图，而不要使用  未经校准的 地图，因为…

…经过地理校准的地图较新，具有Region标题，您可以通过地理坐标（纬度/经度）或仅输入要自动转换为坐标的地址来添加标记。– MapSVG教程

从“ 新SVG地图”下拉菜单中选择“中国”（或您喜欢的任何其他地图）  。如果您讨厌滚动条，请随时使用搜索框。

在下一个屏幕上，填写  标题并根据需要更改“  预加载器文本”。在同一屏幕上，您可以设置地图大小，关闭响应式设计（默认情况下处于启用状态，因此请不要触摸拨盘），打开工具提示和弹出窗口等。

您还会注意到地图已经被划分为区域（在我们的例子中为中国省），并且它们已经可以单击！此外，请熟悉其他控件，包括“  菜单”下拉菜单。

让我们更改一些颜色，并感受一下插件。导航至  菜单>颜色，如下所示。

“  颜色”屏幕可帮助您选择梦想的颜色。我的意思是您要使用的颜色没有限制。只需使用颜色选择器，直到您拥有自己喜欢的东西即可。我会用蓝色的色调去，因为WordPress是BAE ?

选择您的颜色，别忘了按下“  保存Ctrl + S”按钮，如下图所示。

看到？我告诉过您MapSVG易于使用。只需单击几下，我便更改了地图颜色，感觉很好–就像多年前的一次，我在Google排名第一。编辑地图的任何其他部分同样容易，为证明我的观点，我将添加工具提示，因为这很有趣。

在MapSVG中添加工具提示

因此，如何添加鼠标悬停在地图上某个区域时出现的工具提示？这很容易，我稍后会告诉您如何。

顺便说一句，如果由于某种原因不清楚任何事情，请不要犹豫查看官方的MapSVG教程和文档。更好的是，点击本文末尾的评论部分，我将召集Thor为您服务。那把锤子解决了一切

除此之外，添加工具提示还涉及添加模板（还记得我们前面提到的模板编辑器吗？）。为此，请导航至  菜单>模板，然后选择  区域工具提示。 

接下来，在模板编辑器中添加以下代码，然后单击“ 保存Ctrl + S”按钮，如上所示。

Province: <strong>{{title}}</strong>

上面的代码是带有Handlebars标签的简单HTML 。如果您只想显示您所在地区的标题，请使用{{title}}标签。您也可以定义自己的自定义字段，稍后您将学习。但是首先，让我们打开工具提示功能。

导航至  菜单>设置，然后打开  工具提示功能，如下所示。

如您在上面的屏幕截图中所见，我们的工具提示处于活动状态。仍然，我提到我将向您展示如何添加自定义字段，以便您以难以想象的方式丰富工具提示。假设您想在工具提示中添加照片和更多信息。你会怎么做？为此，我们调用前面提到的  数据库对象。

通过数据库对象添加自定义字段

MapSVG允许您向地图添加自定义字段。我们已经有{{title}}字段，但让我们看看如何添加更多自定义字段。您可以选择自定义字段，包括  文本，文本区域，复选框，图像 等。让我们向内蒙古省添加一些图像。

转到  菜单>区域，然后单击  编辑字段按钮，如下图所示。

在下一个屏幕上，单击“  图像”按钮，然后单击“  保存字段”按钮，如下所示。

通过单击保存Ctrl + S按钮保存更改  。永远记得保存您的更改。

接下来按下  列表按钮，如下图所示。

将地图切换到“  编辑区域”，然后单击一个区域（我们选择了Nei Mongol）。您应该在右侧看到新的自定义字段（图片）。点击  浏览按钮。参见下图。

在下一个屏幕上，添加图像，然后单击“ 选择图像”按钮。

您将被重定向回“  编辑区域”  屏幕，在其中必须单击“  确定（1）” 按钮。接下来，单击  保存Ctrl + S（2）按钮，然后返回到  预览（3）模式，如下所示。

如果此时尝试将鼠标悬停在Nei Mongol上，则图像不会显示在工具提示中。为什么？好吧，我们还没有为图像创建模板。让我们现在就这样做。

导航至  菜单>模板>区域工具提示，并将代码更改为此：

Province: <strong>{{title}}</strong><br />

First image:<br />
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />

All images:<br />
{{#each images}}
    <img src="{{thumbnail}}" width="40px" />
{{/each}}

这是进一步说明的图像。记住点击  保存按钮。

现在，尝试将鼠标悬停在您选择的区域（本例中为内蒙古）。告诉我你所看到的。这是我的屏幕上的内容。

很整洁吧？您刚刚学习了如何向MapSVG地图添加自定义字段。添加弹出窗口和标记也很容易。此外，只要您了解这些基本知识，就可以在阳光下创建任何交互式地图/图表。

与MapSVG一起工作的是四年级学生，特别是因为Roman Stepanov通过教程提供了强大的支持和出色的指导。要在WordPress网站上显示地图，请保存更改并导航至  Pages> Add New。

接下来，如上图所示点击  MapSVG按钮并选择您的地图。这会将短代码[mapsvg id =” 17” title =“ China”]添加到您的WordPress页面。无论如何，请随时使用简码在您网站的任何位置添加地图。不用担心，使用MapSVG创建的地图具有100％的响应速度，这意味着它们在多种设备上看起来都很棒。

接下来，点击发布，并在前端查看结果。

结论

如果我们经历了每个功能，我们将整天待在这里，但我鼓励您获得自己的MapSVG WordPress地图插件副本，  并对其进行测试。在您我之间，这是您永远需要的唯一WordPress地图插件。

---

---

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！