告别谷歌地图。用SVG创建更快速、更私密、更可定制的地图
你希望在网站上添加一个交互式、可定制的地图。
虽然谷歌地图在个人地图和路线规划方面可能是领先者，但对于其他用途而言，它并不总是最佳解决方案。
WordPress开发者寻找谷歌地图API替代方案有很多原因。加载速度、隐私问题、UI自定义以及功能缺失都是合理关切和反对的理由。
那么，你应该用什么来代替呢？
继续阅读，了解更多关于SVG作为谷歌地图替代方案的信息，以及一个插件如何帮助你创建你设想的交互式地图。
没有任何妥协。
为什么你需要一个谷歌地图的替代品
并不是说你不能用谷歌地图创建自定义的交互式地图。
例如，假设你想制作一张佛罗里达州最适合带狗去的海滩的地图，并嵌入你的网站。
使用谷歌地图，你可以选择目标位置，添加图层、图钉标记，并添加一些自定义细节（如位置描述和标记颜色）。
如果你只需要这些，那也没问题。
但如果你为你的地理地图设想了更多功能呢？或者，如果你想创建一种完全不同的地图呢？
让我们从这里开始——地图类型。以下是一些谷歌无法帮助你绘制的位置和内容类型：
- 代理定位地图（如房地产或保险）
- 建筑布局图
- 商店部门分布图
- 校园地图
- 商场导览图
- 活动或会议布局图
- 公寓平面图
- 私人地点地图（例如游乐园、区域公园、博物馆）
- 数据可视化地图
- 带有固定推荐和位置的博客文章图形
以下是开发者和设计师经常寻找谷歌以外的方案来创建自定义地图的其他原因：
- 他们希望地图符合品牌风格，而不是谷歌的。
- 所需的功能或特性不可用。
- 他们有自定义数据来生成地图和兴趣点。
- 谷歌地图信息太多，容易分散注意力。
- 他们希望除了标记点之外，还能让区域可点击。
- 他们对将所有位置和业务数据提供给谷歌感到担忧。
- 谷歌地图API使页面加载速度过慢。
- 他们希望与WordPress无缝集成的东西。
如果这听起来像是你的情况，MapSVG可能就是你要找的替代方案。使用这个WordPress插件，你可以使用SVG文件和你自己的数据创建任何类型的地图，然后按你的喜好进行自定义。
如何使用MapSVG创建自定义的交互式地图
MapSVG为你提供了对网站地图尽可能多的灵活性和控制。凭借广泛的自定义设置以及JavaScript和CSS编辑器，你可以通过这个WordPress插件将你的设想变为现实。
以下是插件内部的一瞥，以及你将如何使用它来拼凑你的下一个地图：
注意（已更新）： MapSVG包含自己的数据库，具有用于区域和标记的自定义字段。你可以直接在MapSVG中添加和管理这些字段。
如果你更喜欢将数据保存在WordPress文章/自定义文章类型中，你可以选择使用ACF来管理这些字段并将其连接到MapSVG。ACF不是必需的。
第 1 步：添加你的SVG图形
安装MapSVG插件并激活许可证后，进入插件的仪表板。在这里，你可以选择从数十个地理模板创建地图，或者导入你自己的地图。
点击“新建SVG地图”下拉菜单，从一百多张世界、大洲、国家以及美国各州的地图中选择。
例如，这是世界地图：
这是多米尼加共和国的地图：
这是明尼苏达州的地图：
查看完整的地图列表。
如果你更喜欢使用自己的地图或图形，选择“上传SVG”。上传内容没有限制。
也就是说，如果你以某种方式设置SVG文件，MapSVG插件可以为你节省绘制区域、创建对象和添加标记的时间。具体来说，插件将解析可用的图形，在SVG文件中查找以下内容：
- 对象具有设定的ID
- 对象是路径/矩形/多边形/椭圆/圆形
如果满足这些特征，插件将自动将这些对象映射为“区域”。
第 2 步：自定义地图外观
地图加载后，MapSVG编辑器将如下所示：
左侧是你导入的SVG文件。在本例中，这是一张草原公园露营地的插图地图，旨在帮助游客游览。
右侧是设置面板。顶部工具栏中的图标使你能够自定义地图的各个方面，以及其中的各种区域、对象或位置。
前两个图标——设置和颜色——是你进行大部分初始配置的地方。你可以设置缩放和滚动控件，配置工具提示和弹出窗口的显示方式，为标记添加标签等。你还可以自定义地图内的颜色。
如果你想要进行进一步的样式和自定义，请使用工具栏末尾的JavaScript和CSS图标进行调整。
第 3 步：添加或导入你的数据
有两种交互式内容可以添加到你的地图中。
区域是划分地图的较大容器。例如，在美国地图上，区域很可能是50个州。但也可以按地区划分，如东北部、西南部等。对于商店地图，区域可以是部门（例如“男装”、“鞋类”、“家居用品”）。
并非每个地图都必须有区域。如果你只想添加带有相关信息的标记，可以将地图设置为仅包含对象。
对象可以是任何你想要的东西。例如，在露营地地图示例中，对象是公园周围的所有关键位置，包括：
- 小木屋
- 帐篷露营地
- 卫生间设施
- 篝火坑
- 狗狗公园
但是，如果你创建的SVG文件使得插件无法清晰识别你的区域和对象在哪里，则需要手动创建它们。有几种方法可以完成此操作。
使用编辑器添加区域
要手动向地图添加区域，请点击顶部工具栏中的“编辑SVG文件”按钮。地图将保持原位，但屏幕左侧会出现一个带有绘图工具的小工具栏。
使用这些工具，你可以选择对象（如狗或树图形）。你还可以绘制几何形状来设置各种区域。选择或添加区域后，双击它并给它一个描述性的ID。你还可以自定义填充颜色。
区域保存在文件中后，当你转到“地图设置”>“区域”时，你将能够看到它们。
我在上面截图中创建的新“cabin”区域已添加到我的列表中。但它缺少重要细节。要填写这些，请点击要编辑的区域。
默认情况下，MapSVG将允许你填写以下字段：
- ID
- 标题
- 描述
- 状态
- 图像（上传）
- 链接
如果你想修改可以为每个区域附加的信息，请点击设置面板上方的“编辑字段”按钮（铅笔图标）。
你在左侧看到的是可以填写的所有字段。右侧是自定义每个字段参数的地方。
要删除字段，请从左侧选择它，然后点击右侧的“移除”按钮。
要添加字段，请选择底部的按钮之一——例如文本、文本域、复选框、单选按钮等。然后根据需要配置设置。
MapSVG的内置数据库允许你直接添加/编辑区域和对象的自定义字段。
如果你的工作流使用带有ACF的WP文章/自定义文章类型，你也可以连接它们——ACF是可选的，不是必需的。
完成后，保存更改并返回到你的列表。
导入对象的CSV文件
要向地图添加对象（及相应的标记），你需要导入CSV文件。（顺便说一下，你也可以对区域进行同样的操作。）
为了导入CSV，字段必须与插件中的字段匹配。要查看当前有哪些字段，请转到“数据库”>“编辑字段”。与区域相同，如果你想自定义附加到每个对象的字段，请在此处添加、编辑或删除它们。
将电子表格映射到MapSVG中的字段后，输入所有可以输入的相关信息。至少包括ID和标题。稍后可以在插件内填写其余详细信息。
这是我在Google表格中的对象导入文件的样子：
要下载此示例供自己使用：
- 在浏览器中打开此文档。
- 转到“文件”>“制作副本”并将其保存到你的Google云端硬盘。
- 或者，点击“文件”>“下载”并将其保存为逗号分隔值文件到你的计算机。
你会在文档中找到示例的区域和对象表格。如果你计划同时使用两者，则需要分别导出它们。
准备好CSV文件后，从“数据库”视图点击“导入”按钮（如果导入对象）。选择文件并上传。
完成后，转到“列表”视图，你会发现所有对象都已添加。
要填写详细信息并添加图像，请点击对象名称进行编辑。
如果你想添加标记（红色位置图钉），也可以从这个面板进行操作。
在右侧选择要在地图上标记的对象。打开编辑窗格后，点击左侧地图上你想要放置图钉的位置。或者，你可以输入地址或坐标来映射你的标记。
虽然区域本质上是交互式的（基于你在下一步启用的设置），但对象不是。因此，你需要为它们添加标记，以便访问者与它们交互。
第 4 步：让你的地图活起来
不同类型的地图需要不同的交互性。
显示详细信息
首先进入顶部工具栏中的“操作”选项卡。从这个屏幕，你可以决定用户与地图交互时会发生什么。
例如，当有人点击一个区域或标记时，你可以将地图设置为：
- 缩放至该区域。
- 分享相关详细信息。
- 显示一个弹出窗口。
- 引导他们到一个链接页面。
- 显示一个不同的地图。
- 显示工具提示。
你也可以为目录项进行此设置。
另外，查看“详情”面板下的设置。在这里，你可以决定区域或对象详细信息如何显示。选项包括：
- 地图容器
- 全屏
- 左侧边栏
- 右侧边栏
- 页眉
- 页脚
- 自定义容器
如果你为一个位置、对象或人物添加大量详细信息甚至照片，最好保持地图界面清晰，并将详细信息呈现在一侧。通过将详细信息呈现在地图外部的容器中，这将使你能够创建更有条理、更用户友好的体验。
包含筛选器、搜索和目录
包含许多区域和标记的地图可能会让一些访问者不知所措。虽然有些可能很有趣——比如等值区域图或其他数据可视化——但其他访问者可能需要更直接的交互方式。
例如，假设你有一张包含你县所有保险代理办公室的地图。保险代理根据他们销售的产品被分配了类别类型：健康、汽车、人寿、责任险等。
与其让访问者点击每个标记并深入了解每个代理的详细信息来获取这些信息，你可以从“筛选器”选项卡启用筛选器和搜索。
就像区域一样，你可以自定义哪些字段出现在筛选器栏中。默认情况下，“类别”和“按地址搜索”会出现。
选择任意一个并点击“移除”删除它们。然后使用底部的选项卡添加你确实需要的任何字段。
将筛选器与导入的SVG图形一起使用时，对于筛选器，最好使用文本搜索、按地址搜索、位置搜索以及按ACF字段或分类法排序（如果你使用ACF插件）。
另一种帮助用户筛选地图中所有信息的方法是包含一个目录。
目录可以设置在侧面，并显示地图上可点击的对象或区域的列表。你也可以在目录中显示类别。由你决定显示哪些类别以及它们以何种顺序显示，以便于搜索。
第 5 步：优化地图性能
一般来说，SVG文件的大小比JPG或PNG图像要小得多。但是，有些因素会影响SVG文件的大小及其对页面速度的影响。
如果你还没有养成这个习惯，这里有一些在创建SVG文件时可以减小其大小的方法：
- 尽量保持画布较小。SVG是可缩放的，因此你不需要为了创建地图或图形而使用更大的文件尺寸。
- 尽量减少使用的路径数量。尽可能选择形状。
- 导出文件前，去除不必要的代码和元数据。
- 此外，如果文件中有任何隐藏内容或位于画布之外的内容，请将其从最终文件中移除。
- 如果可能，将你的HEX代码缩短为三位数而不是六位数。
这里还有更多关于准备文件时如何为网站性能优化SVG的提示和指南。
文件导出后，你可以采用其他策略来减轻页面加载速度的压力。
首先，启用缓存。这样，如果你的地图或页面上的其他内容没有变化，浏览器可以快速为访问者提供内容。
此外，对出现在首屏以下（折叠下方）的任何地图应用延迟加载。最简单的方法是像这样编辑地图的短代码：
|
|
这将延迟地图的加载，直到有人滚动到页面的该部分（如果他们滚动那么远的话）。
最后，使用MapSVG，你还有一个额外优势，即地图初始化代码是按需生成的。这将使你的页面尺寸更小。
一些性能插件（例如WP Rocket、LiteSpeed Cache）可能会以影响交互式地图的方式缩小/延迟脚本。
我们建议将这些优化（缩小/延迟/预加载）中排除MapSVG资源，以避免问题。
第 6 步：将地图添加到你的页面
要将地图添加到页面或文章中，复制短代码。你可以在编辑器左上角地图名称旁边找到它。短代码也可以在MapSVG仪表板上找到。
点击复制短代码。然后进入你的页面，使用WordPress、Elementor或你选择的块编辑器添加一个短代码块，并粘贴短代码。
保存更改，然后预览你的作品。现在你将能够像你的访问者一样查看和与地图交互。
如果区域或标记有悬停或点击触发的操作，请测试它们。在这个来自MapSVG页面的演示中，你可以看到左侧的目录如何为每个代理高亮对应的州。点击代理名称则会显示一个详细的弹出窗口。
确保你启用的功能完全按照你的预期工作。然后将页面或文章发布到你的网站。
总结
在网站上使用谷歌地图并没有什么错。有很多用例中，谷歌的地图工具是合理的——比如显示办公室的放大图、提供到达某个位置的预设路线，或显示自定义位置。
但谷歌地图并不总是符合要求。更重要的是，它还带来了加载速度、数据隐私、功能限制等方面的担忧。
单独的SVG文件可能看起来不是一个实用的替代方案。但使用MapSVG转换成交互式地图的SVG文件确实是。
使用这个WordPress插件，你可以用你以前只能梦想的颜色、细节和功能来自定义你的地图。
为你的下一个构建探索MapSVG（面向开发者的Elite计划目前有33%的折扣）。