spot_img
HomeDivi主题使用教程如何将交互式地图添加到您的 WordPress 网站

如何将交互式地图添加到您的 WordPress 网站

诚然,在线地图相当简单。 如果您使用谷歌地图等服务,您只需选择一个位置并将地图嵌入您的网站。 但是,您不能即时编辑常规地图,您的同事也不能——这对于协作项目来说通常是必需的。

这就是交互式地图的用武之地。它们让您可以放置​​团队中每个人都可以编辑的可移动标记。 在这篇文章中,我们将讨论这种类型的地图何时派上用场。 另外,我们将教您两种将它们添加到 WordPress 的方法。

让我们开始工作吧!

什么是交互式地图(以及何时使用它们)

将地图添加到网站非常简单。 谷歌地图或 Divi 等工具 地图 模块可让您在几分钟内将地图嵌入到您的页面中。 这种方法的优点是访问者可以在地图上移动、放大、缩小等。 这些类型的地图比简单的图像更具交互性,但一旦将它们添加到您的网站,您就无法进行更改。

另一方面,交互式地图使您(在某些情况下您的同事)能够向其中添加新的标记、图标、文本等。 想象一下,例如,您正在为您网站的成员计划一次聚会。 您可以设置一个带有多个图钉的地图来建议位置。

WordPress divi主题

您还可以使用交互式地图让您的用户共享他们的位置,或将彼此指向他们可能想要访问的地方。 公平地说,这些都是非常小众的应用程序。 但是,交互式地图 能够 在各种情况下都能派上用场。 另外,添加它们并不一定比常规对象更难。

如何将交互式地图添加到您的 WordPress 网站(两种方式)

当谈到交互式地图时,您可以将一个嵌入到您的网站或使用插件来帮助您做到这一点。 前一种方法更简单,但正如您所料,插件通常包含更多功能。 让我们首先回顾一下插件方法,以展示这些功能是什么。

1. 使用 Maps Marker Pro 插件

Maps Marker Pro 主页。

Maps Marker Pro 插件是在 WordPress 中包含地图的一站式高级解决方案。 它包括许多高级功能,例如使您能够从多个服务中提取地图,以及向您的地图添加几乎无限数量的标记并对它们进行分类。 此外,访问者可以过滤他们希望在您的地图上看到的标记类型。

您可以使用该插件做的其他有趣的事情包括在标记之间添加距离和路线信息。 如果愿意,您甚至可以通过网站地图实时分享自己的位置。 考虑到它提供的丰富功能,配置插件可能需要一些时间。 然而,它并不像您想象的那么困难。

要开始使用,请像其他任何插件一样设置和激活插件。 一旦插件准备就绪,您需要添加一个新的地图或“图层”,您可以从 Maps Marker Pro > 添加新图层 标签。 在这里,为您的图层设置一个您可以识别的名称,并输入您希望它显示的位置,就像您使用任何其他在线地图工具一样:

添加一个新层。

现在,您可以使用左侧菜单微调默认设置的大小和缩放级别。 还有一个选项叫 标记聚类,如果您缩小得太远,它将显示一个带有标记数量的图标,如下例所示:

正在运行的标记聚类功能。

在地图下方显示标记列表 另一方面,选项是不言自明的。 如果您想为标记包含其他信息,它会派上用场:

谷歌SEO优化服务

您现有标记的列表。

现在向下滚动并查找显示的选项 向该层添加新标记. 在下一个屏幕上,您将能够使用与前一个屏幕相同的地图为您的标记设置名称和位置。

您还可以选择一个图标并为您的标记设置弹出文本。 当人们点击标记本身时,这将显示出来,或者如果您选择包含它,则从列表中选择它。 无论如何,记得点击 发布 完成后的按钮。 添加一些标记后,您的初始层应如下所示:

Maps Marker Pro 地图示例。

当您准备好将新的交互式地图添加到您的其中一个页面时,您需要使用简码。 滚动回到顶部 编辑图层 选项卡并查找其对应的 ID:

H10的年终大促

检查地图的 ID。

现在,将 [mapsmarker layer=”X”] 简码到您想要的帖子或页面。 记得更换 X 不过,事先使用图层 ID 的占位符。

您的地图现在应该已在您的网站上启动并运行! 更重要的是,您或您团队中的任何其他人都可以随时编辑它并添加新标记,而无需离开您的仪表板。

2. 通过谷歌地图内置的嵌入功能

Google 我的地图主页。

谷歌地图几乎不需要介绍——它是一项服务,可以让你从世界各地提取地图,这样你就可以与其他人分享位置、查找地址,甚至分享你的位置。 对于网站,您可以通过多种方式将 Google 地图嵌入到您的页面中。 但是,大多数地图提供的交互性有限。 它们使您能够浏览它们、放大、缩小和切换视图,但仅此而已。

问题是,Google 地图提供的功能远不止简单的地图绘制。 例如,您还可以添加多个标记、测量距离并在地图中包含方向,类似于 Maps Marker Pro。 要试用这些功能,请转至 Google 我的地图并点击 创建新地图 按钮:

创建新地图。

在下一个屏幕上,为您的地图及其第一层设置标题,这是我们将在其上构建的层。 现在使用屏幕顶部的 Google 地图搜索栏找到您要共享的位置:

为您的新地图设置位置。

放大后,您可以使用屏幕顶部的标记符号开始突出显示地图上的位置。 只需单击要放置标记的位置,然后为其设置名称和图标:

高质量外链购买

向新地图添加标记。

一旦你有多个标记,你可以追踪它们之间的线以显示距离:

追踪标记之间的线条。

准备好地图后,转到 分享 左侧菜单上的按钮。 在那里,更改设置 谁有权访问 私人的 上市:

将地图设置为公开。

writesonic

您还可以使用他们的电子邮件邀请个别团队成员,这样他们就可以立即访问以编辑地图:

邀请人们在您的地图上进行协作。

无论如何,您仍然必须将新地图嵌入您的网站。 您可以通过单击地图标题旁边的三点图标并单击 嵌入我的网站 选项:

在您的网站上嵌入地图。

现在,您可以使用 Divi 将嵌入代码复制并粘贴到您的任何页面上 代码 模块,例如。 您的新地图将显示在您放置的任何位置。 此外,您的队友将能够根据需要通过 Google 地图对其进行编辑和添加新标记。

对于优雅主题会员

如果你只需要一张简单的地图和一些标记,你也可以使用 Divi 的地图 模块添加一个到您的网站。 让我们谈谈如何去做。

如何使用 Divi 地图模块将地图添加到您的 WordPress 网站

在开始工作之前,您需要创建一个 Google API 密钥,Divi 需要它来为其模块使用的地图提供支持。 按照本教程获取您的 API 密钥,获得它后,在您想要的页面上打开 Divi Builder。 接下来,添加一个地图 模块并打开其设置。 你会看到一个按钮,上面写着 添加您的 API 密钥 靠近屏幕顶部:

添加 API 密钥的选项。

单击此按钮会将您带到 Divi 设置 页面,您可以在其中添加您的 Google API 密钥:

将您的 Google API 密钥添加到 <a href=迪维。 宽度=”880″ 高度=”163″ />

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

保存您的密钥并返回到 Divi Builder。 如果你打开你的 地图 模块设置窗口,你会看到你现在可以选择一个 地图中心地址,这是您的地图将显示的位置:

为您的地图设置位置。

找到您要显示的地址,然后向上滚动到显示的位置 添加新图钉. 单击此按钮将使您能够设置标题、描述和地图第一个图钉的位置:

为您的图钉设置一个位置。

牢记——Divi’s 地图 模块使您能够添加多个引脚。 如果您想突出显示多个地址,这使它成为一个有效的选项。 此外,您可以通过进入 设计 设置和玩弄选项。 这是使用 Divi 构建的成品地图示例 地图 模块:

运行中的 Divi 地图模块。

虽然 Google Maps 和 Maps Marker Pro 确实提供了更多自定义设置,但 Divi 在易用性方面表现出色。 此外,您不需要使用短代码或嵌入代码来放置您的地图。 毕竟,构建器让您可以完全控制它们的去向。

结论

将地图添加到您的 WordPress 网站很简单,特别是如果您使用的是 Divi,这要归功于它 地图 模块。 但是,常规地图仅在您想要展示单个地址时才有用。 如果您需要更多的灵活性,交互式地图是您的不二之选。

使用 WordPress,您可以通过两种方式将交互式地图添加到您的网站。 让我们回顾一下:

  1. 使用 Maps Marker Pro 插件。
  2. 通过谷歌地图内置的嵌入功能。

您对何时在 WordPress 网站上使用交互式地图有任何疑问吗? 让我们在下面的评论部分讨论它们!

文章图像缩略图由 Hluboki Dzianis / shutterstock.com 提供。

5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES