如何在 WordPress 中显示响应式矢量图

过去,向 WordPress 站点添加矢量地图是一项复杂的任务。 编辑矢量文件、使用 API 或安装 Javascript 库 – 添加响应式地图变得非常快和复杂。

有几个映射插件,但没有插件工作没有太多的设置,或再次没有API连接。 但现在有一个优秀的(和免费的)插件,做美丽的矢量映射工作。 它被称为 交互式地理地图.

使用交互式地理地图创建世界细分地图或特定国家/地区的地图非常简单。 您可以在 15 分钟内完成,而无需摆弄 API 或其他脚本。

您还可以自定义区域的外观、添加工具提示或向区域添加 URL 以使其可单击。

查看创建地图的步骤,了解地图的工作原理。

安装交互式地理地图插件

这里没有什么不寻常的,但按照正常的插件安装说明。

登录到 WordPress 管理面板。

在左侧列导航中,单击[プラグイン]将鼠标悬停在链接上,然后单击[新規追加]单击链接。

在“搜索插件…”框中,键入交互式地理地图。

查找文字新闻交互式地理地图插件

找到插件后,单击“立即安装”按钮。

点击安装WordPress互动地理地图插件

最后,单击“激活”按钮。

点击启用WordPress互动地理地图插件

使用交互式地理地图

创建新矢量贴图所需的步骤很少。

  • 选择地图
  • 定义区域
  • 发布地图

您只需执行这些步骤,但还要添加标记以突出显示区域中的特定位置。

让我们开始吧。

创建新地图

在左侧列导航中,单击[マップ]将鼠标悬停在链接上,然后单击[新規追加]单击链接。

["新規追加" リンク

マップにタイトルを付けます。

マップのタイトルを入力します。

次に、レスポンシブベクターマップに表示されるものを選択しましょう。

地域マップの選択

デフォルトでは、プラグインは世界地図を表示します。しかし、何百ものマップから選択できます。

[新しいマップの追加]向下滚动页面,然后单击[マップ設定]转到该部分。

[表示するマップ]单击下拉列表以查看可用的地图。

["表示するマップ" ドロップダウン

お気づきのように、ほとんどのマップには少なくとも 2 つのバージョン、”高” と “低” があります。これは、マップ イメージに含まれる詳細を指します。

マップの “高” バージョンでは、”低” バージョンよりも大きなファイルが必要です。したがって、もちろん、「高」イメージの読み込みに時間がかかります。

マップの詳細とパフォーマンスのバランスを取る方法を決定する必要があります。ビジー状態のサイトやモバイルトラフィックの多いサイトは、小さい(「低」)ファイルを使用することでメリットが得られます。

このデモでは、「World Great Lakes Ultra」を使用します。「Ultra」ファイルは「High」ファイルよりもさらに大きいですが、これはライブサイトではないので大丈夫です。

投射

「投影」設定 マップの表現方法を変更します.

「Miller」設定はデフォルトの投影法であり、今はそのままにしておきます。しかし、メルカトル図法を好む場合は、米国の地図で作業している場合は、AlbersUSAと同様に、それが利用可能です。

[説明]向字段添加说明以跟踪多个地图。 我们只是做一个,所以我把它留空。

设置投影和说明

可视化设置选项卡

在这里,您可以设置地图显示选项的一部分。 在这里,我们保留默认设置,但您可以更改:

    • 背景颜色
    • 边框 C 奥罗尔
    • 边框宽度
    • 地图高度
    • 最大宽度地图
    • 字体系列

可视化设置选项卡

定义地图上的区域

现在为有趣的部分。 现在,您将向地图添加交互性。

如果在定义区域之前保存地图,则会显示地图,但没有交互式元素。

无交互映射

它看起来很棒,但鼠标悬停或单击不会执行任何操作。 让我们修复它。

单击“区域”选项卡。

将显示以填充、悬停和天空颜色开头的默认值列表。 您可以在此处更改值。 我要离开默认值。

下一个值是单击操作,您可以更改它。 控制单击区域时发生的行为。

将单击操作设置为“打开 URL(新选项卡)”,以便可以向区域添加可单击的 URL。

单击 "打开 URL(新选项卡)"

最终默认值是包括或排除区域。

在“包括区域”显示屏上输入区域代码(稍后将详细介绍) 唯一 他们的地区。 地图的其余部分将消失。

在“排除区域”中输入区域代码时,这些区域将从地图中永久删除。

例如,如果在“排除区域”中键入 RU,则俄罗斯将从地图中消失。

俄罗斯怎么了?

现在,让我们添加一个区域

有两种方法可以将区域添加到地图。[新しい地域を追加]单击该按钮进行搜索,或从右侧列中的可用区域列表中选择区域。

选择区域的两种方法

让我们来看看每种方法,你可以决定哪一个最适合你。

单击“添加新区域”按钮以添加区域

首先,单击“添加新区域”按钮。

["新しい地域を追加" ボタン

[名前]将区域名称添加到字段中。

当您开始在“区域代码”字段中输入区域名称时,将弹出区域选择。

如果在此处输入加拿大,则包含区域代码 (CA) 的加拿大选择将显示为绿色。 单击绿色字段以添加国家/地区代码。

查找区域代码

如果输入区域后未显示代码,则表示该区域在地图上不可用。 尝试附近的区域,或查看右侧列的列表。

“工具提示内容”字段提供一个空间,用于键入当有人将光标悬停在该区域上时要显示的文本。

在“操作内容”字段中,可以输入单击区域时要打开的 URL。

工具提示和操作内容

单击“添加新区域”按钮。

现在,加拿大在预览地图中处于活动状态,当您将鼠标悬停在预览地图上时,将显示工具提示。

预览地图中的活动加拿大

在区域列表中单击以添加区域

添加区域的第二种方法是”+右侧列区域旁边的“图标。 这是我喜欢的方式,因为它已经预设了几个字段。

因此,向下滚动,直到找到瑞士添加瑞士[+]单击。

[+]以添加区域

现在,您可以看到您已经输入了名称、区域代码和工具提示。 您可以编辑名称和工具提示并添加操作 URL。

单击“添加新区域”按钮。

["新しい地域を追加" ボタン

どちらの方法を使用しても、引き続き領域を追加できます。

マップへのズームの追加

さらにいくつかの地域を追加した後、マップはより完全に見え始めています。

ズームなしのページ上のマップ

しかし、いくつかの地域を詳しく見たい場合はどうでしょうか?デフォルトではズーム機能はありませんが、簡単に追加できます。

プラグインの[設定]转到该部分,然后单击[マップ機能]单击选项卡。

点击 "地图功能" 选项卡

单击“缩放”切换将其打开,然后单击“保存”按钮。

点击 "缩放" 点击 "保存"

现在,当您查看地图时,您可以放大和您现在可以缩小。

放大地图

添加位置标记

定义区域并添加文本和链接后,地图会很酷。 但是,您可以通过添加一些位置标记和信息来进一步改进它们。

在演示中,我定义了我访问的几个国家,但如何添加城市?

有两种方法可以添加位置标记,两者都在“圆形标记”选项卡上完成。

首先,您可以通过单击“地图预览”中的地图来设置标记。

[マップ]以设置标记

它简单方便,但不太准确。

第二种方法需要更多的努力,但我更喜欢它的准确性。 需要位置的纬度和经度。

推荐插件 纬度和经度查找器站点因此,我使用它。

在单独的选项卡中打开纬度和经度查找器站点时,添加位置会更容易。

查找要标记的城市的纬度和经度,然后切换到插件。

纬度和经度查找站点

在“舍入标记”选项卡上,单击“添加新标记”按钮。

[マップ]以设置标记

您可以看到,该字段与添加区域时大致相同。 唯一的区别是纬度和经度的附加字段。

添加标题,并根据需要添加工具提示和操作内容。 (如果要将 URL 添加到操作内容,请记住在以下部分中设置单击操作。

然后,从纬度和经度查找器站点查找复制并粘贴纬度和经度。

输入纬度和经度

现在,当您保存地图、导航到网站并放大区域时,您将看到一个标记。

地图中的标记

更改标记的外观

默认情况下,标记的颜色与区域相同,并且点稍大一些。

要设置新标记的颜色并减小标记点,请在“舍入标记”选项卡上更改默认值。

更改标记的默认值

保存地图并导航到站点并放大区域时,标记将从该区域中脱颖而出。

地图上的红色标记

您可以添加任意数量的标记。

地图上的许多红色标记

请注意,绘制过多的标记可能会对地图加载速度产生负面影响。

“太多”是什么意思? 这取决于您的网站、主机等。因网站而异。

发布矢量图

嗯,我们在这里一起经历了很多。 然后,在网站上显示地图。 有几种方法可以做到这一点,正如你可能期望的那样。

第一种方法是将地图的短代码复制到页面或帖子中,使其成为要查看的位置。 短代码是[マップ]在页面上。

地图页面的短代码

或者,编辑地图页面:

地图编辑页面的短代码

使用 WordPress 古腾堡编辑器时,插件将创建块。

您可以在“小部件”部分找到它,它被称为“地图”。

地图块

添加块后,[表示するマップ]您可以从下拉列表中选择地图。

地图块 选择要显示的地图

如果只有一个地图,则没有理由使用块。 但是,如果您管理了很多,您可以看到下拉列表的帮助位置。

卸载交互式地理地图插件时会发生什么情况?

卸载插件时,使用该插件的页面和帖子将受到影响。

    • 插件创建的地图将被删除。
    • 由于插件的短代码不再工作,因此短代码本身将显示在使用的位置。

矢量图有什么特别之处?

矢量地图是 。 与其他图像文件类型(如 jpg 和.png)相比,可以缩放或调整大小。 这种类型的图像文件称为“栅格”图形。 它们由不同颜色的像素组成。 矢量图形由点和路径组成,就像此插件中使用的地图一样,用于连接点和点的图形。

放大栅格图像会模糊,因为单个像素被“拉伸”到更大的大小。 如果每英寸 72 像素 JPG 放大到 200%,则 72 像素不会神奇地为 144 像素。 因此,图像质量受损。

另一方面,放大矢量时,点之间的线条将重新绘制,因此图像将保持平滑。 可以想象,重绘是有代价的。 矢量图像使用比栅格图像更多的计算资源进行渲染。

尽管计算成本高昂,矢量格式非常适合需要适应不断变化的显示大小的地图、徽标、图表等。 矢量图形是保证此类布局质量的最可靠方法。

地图上的最后一句话?

长期以来,谷歌地图API一直是大多数人信赖的地图绘图仪。 但是,由于最近要求信用卡获取 API 密钥的更改,许多人正在寻找替代方案。

如果要在 WordPress 中免费创建矢量地图,交互式地理地图插件是唯一的方法。 它在其他可用的矢量映射插件(当然很少)中脱颖而出。

我们已经看到了它是多么容易使用,所以没有理由今天不能创建地图。 选择地图以定义和发布区域。 这不会更容易。

您是否尝试过在您的网站上手动地图集成? 你遇到过其他谷歌地图API选项,我们应该知道吗? 请在评论中告诉我们。

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

如何根据国家/地区更改伍科梅斯价格

2022-9-9 10:21:57

WordPress 教程

如何将 WordPress 降级到以前的版本

2022-9-9 12:24:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索