需要路线吗?这是将地图添加到 WordPress 的方法

技术教程 2021年11月6日
2409 0

您可能想要向 WordPress 网站添加地图的原因有很多.您有店铺并想显示您的位置吗?或者，您可能喜欢房地产，需要展示您的最新房源.无论出于何种原因，向 WordPress 添加地图都很容易.

就像一张好的地图，我们会指导您完成操作.您可以手动添加 Google 地图，也可以借助插件创建.

首先，我将向您展示获取 Google API 的成本以及如何获取.我将在本教程中介绍的大多数 Google 地图插件都需要 Google API.

接下来，我将向您展示如何在没有插件的情况下直接从 Google 地图获取嵌入代码.

最后，我将介绍 12 个符合要求的插件.每一个都有点不同.某些功能可能比其他功能更吸引您.

所有插件都可以免费激活和使用，但有些插件提供升级选项以获得更多进步.

开发人员映射出来他的下一个插件.

既然我们已经完成了这篇文章，让我们开始……

我必须购买 API 吗?

别担心.很有可能它不会花费您任何费用.但是，如果您想通过插件使用 Google 地图，则值得仔细阅读.

自 2018 年 6 月 11 日起，Google 地图就要求拥有 API 密钥.您可以在 他们的定价表如下所示，当你获得一个时的样子.

Google API pricing.
Google API 成本因使用而异.

Google 所做的一件事就是每月在您的结算帐户中定期向您提供 200 美元的赠金.这抵消了您的使用成本，因此除非您提出相当多的请求(例如，一吨)，否则使用 Google 地图不应该花费您一分钱.哇！

既然您不担心成本，让我们......

获取 Google Maps API 密钥

您需要转到 Google Cloud Platform Console 并创建一个帐户.

从那时起，您需要选择或创建一个项目.它会引导您完成设置或仅从已经可用的项目中进行选择.

您必须设置帐单信息-但同样-不要惊慌.不过，除非您超过高使用限制的门槛，否则您不必太担心被收费.如果您这样做，我们将向您收取相应费用.

在输入您的帐单信息后，它现在会要求您选择一种或多种产品.

Google's map options.
Google 为您提供了很多地图选项.

您的选择将取决于您将使用的地图类型.由于接下来我们将讨论如何在没有插件的情况下嵌入地图，因此我们将使用 Maps Embed API.

The embedded map option.
想要嵌入地图吗?选择这个选项.

从这里，您将点击启用.

Where you'll enable Google maps.
一键启用地图.

启用将带您进入APIs &服务仪表板.

您可以在此处创建 API 密钥.点击凭据，然后点击创建凭据.

Where you'll create the credentials.
您的所有 API 密钥都将在仪表板上显示一次已创建，因此您可以随时检索它们.

这样，您就创建了一个 API 密钥.您将需要我们将介绍的许多插件的 API 密钥.

需要记住的是，当嵌入您的 Google Maps API 密钥时，它将以纯文本形式显示在您的源代码中.您需要对此加以限制，以便人们无法在他们的 WordPress 网站上使用您的 API 密钥.如果它落入坏人之手，这可能会导致您的使用量猛增.

这样做很容易.您只需单击 API 密钥的名称即可设置限制.只需添加您的 WordPress 网站引荐来源即可解决问题(例如 https://yourdomain.com/).通过这样做，它会将使用限制在您的网站上.

We'll you'll add website restrictions.
输入您将使用此密钥的网站.

现在您可以使用任何需要 Google API 的插件了.那么，让我们继续看……

将 Google 地图嵌入 WordPress

如果您不想使用插件，而只想通过从 Google 地图中嵌入来添加地图，这很容易做到.

Google 还可以为您想要显示的任何内容添加精确位置、显示有关商家的详细信息等.

为了演示它是如何工作的，我们将设置一张加利福尼亚州洛杉矶的基本地图(嘿，我的树林！)进行嵌入.

我们将前往谷歌地图并拉起洛杉矶区域.根据需要放大或尽可能接近该位置.

Map of Los Angeles, California.
洛杉矶是一个相当大的地方……

然后您将点击左上角的三条小线.这为您提供了一个下拉菜单.此时，您将点击分享或嵌入地图.

Where to embed map.
是否按照您想要的方式调整了地图大小?点击分享或嵌入地图.

完成此操作后，您可以选择发送链接或嵌入地图.另外，您可以选择您想要的地图大小(例如中等).

The map embed code.
您可以确定适合您站点的地图的各种尺寸最好.

从这里开始，您只需将 HTML 复制并粘贴到您的 WordPress 帖子、页面或可接受的小部件中，就是这样！将显示您的地图.

12 个 WordPress 地图插件

假设您想用地图做更多事情，而不仅仅是 Google 地图提供的功能.你想要一些选择，该死！嗯，这就是插件可以提供帮助的地方.

这里有 12 个地图插件，它们可能有助于根据您的标准调整您的地图.

  • MapPress 地图对于 WordPress

    对于有吸引力的交互式谷歌或传单地图，Mapress 地图插件是一个不错的免费选择.

    它具有多站点兼容性，可以拖动和标记drop，并且支持街景.此外，您还可以设置许多参数，例如宽度、高度、缩放比例等.

    如果您升级到他们的专业版，您可以获得额外的功能，例如作为自定义图标、混搭选项和用于显示地图或混搭的地图小部件.

    对 WordPress 的 MapPress 地图感兴趣?

    下载

  • WP 谷歌地图

    顾名思义， WP Google Maps 用于 Google 地图，您可以将其添加到您的WordPress 使用短代码快速轻松地发布帖子和页面.这是目前最流行的 Google 地图插件，安装量超过 40 万.

    您可以通过输入地址来创建任意数量的地图.它还拥有九种流行的地图主题可供选择，拖拽地图标记、全屏地图功能等.

    如果您愿意，您可以升级到专业版想要创建地图，为您的访问者指明方向并添加类别和其他高级功能.

    对 WP Google Maps 感兴趣?

    下载

  • Google 地图的地图小部件

    Google 地图的地图小工具允许您拥有带有缩略图的地图在几分钟内设置灯箱.它只需一个请求即可加载整个 Google 地图，而不是许多其他 Google 地图插件加载它们需要二十多个请求.

    其中一些功能包括自定义 Google 地图大小、地图类型(例如路线图)、配色方案和自定义地图图钉图标.

    凭借可靠的 4.5 星评价和超过 80K 的活跃安装，这是一个免费选项，值得在您的 WordPress 网站上设置以亲自试用.

    对 Google 地图的地图小部件感兴趣?

    下载

  • Supsystic 的终极地图

    如果你想使用其他东西谷歌地图，Supsystic Ultimate Maps plugin 可能是完美的为你.它使用替代地图选项，例如 Bing 地图、OpenStreetMap、Leaflet、Mapbox 和 Thunderforest.

    它具有地图构建器和无限标记，包括描述、链接、图像、视频等.它还具有完全响应性和 100% 可定制性.

    Google 之外的易用性和地图选项使这款 5 星级插件成为一个值得一试的选项.

    对 Supsystic 的 Ultimate Maps 感兴趣?

    下载

  • WP Mapbox GL JS 地图

    要创建自定义地图，WP Mapbox GL JS 地图插件 可能就是你所需要的.该插件使用 Mapbox 服务，包括 Studio Styles 和 Mapbox GL JS 库.

    其中一些功能包括实时预览编辑器、按地址或拖放进行的无限标记以及位置搜索.

    在样式方面，有超过 100 种不同颜色的图标、3D 地图形状、十种样式可供选择等等.

    还有来自 Mapbox GL JS 专家的教程和支持.

    对 WP Mapbox GL JS 地图感兴趣?

    下载

  • 传单地图

    Leaflet Map plugin 通过使用 LeafletJS 生成地图来工作，LeafletJS 是一个用于移动友好型交互式地图的开源 JavaScript 库.

    此插件使用短代码来创建地图、查找地址、经度和纬度等.

    这是一个非常基本的插件，但获得了 5 星评价，它似乎对许多用户都有效.

    对传单地图感兴趣?

    下载

  • 交互式地理地图

    Interactive Geo Maps 插件非常适合在 WordPress 网站上添加交互式地图.有超过 250 幅带有区域和彩色标记的地图.

    此插件非常适合旅游博主、办公地点、统计数据等.

    交互式地理地图对于有限版本是免费的.如果您想升级以包含自定义图像和矢量图标，您可以升级到 专业版.

    对交互式地理地图感兴趣?

    下载

  • Google Maps Easy

    想要快速轻松地设置地图吗? Google Maps Easy 已满足您的需求.您可以在一分钟内设置好 Google 地图.

    它具有带有任何媒体的 Google 地图标记.这包括视频、图片、链接和文字说明.

    它非常适合房地产、联系页面、送货路线等.

    这个插件也是 100% 可定制的，完全响应，并且可以使用无限数量的地图标记 &位置.

    对 Google Maps Easy 感兴趣?

    下载

  • WP 商店定位器

    WP Store Locator plugin 是一个易于映射的插件——你猜对了——商店位置.您将能够向客户准确定位您的位置并以正确的方式发送给他们.

    该插件允许您自定义地图的外观，为输入字段提供自定义标签，并且用户可以按半径过滤结果.还有前往附近商店的行车路线.

    您可以添加的商店数量不受限制.此外，您还可以添加详细信息，例如电话号码、电子邮件、网址、说明、营业时间等.

    对 WP Store Locator 感兴趣?

    下载

  • WP 谷歌地图

    使用 WP Google Map 插件，您可以将自定义 Google 地图添加到您的 WordPress 网站.它完全可定制且免费.

    无需编码，调整也很容易.您可以更改宽度、缩放级别，并向可接受的小部件添加短代码.

    对 WP Google Map 感兴趣?

    下载

  • 灵活地图

    使用 灵活地图，您可以使用简码轻松地将 Google 地图添加到您的 WordPress 网站.

    某些功能包括可选的说明和说明.您还可以按中心坐标、街道地址和 Google 地球 KML 文件的 URL 加载地图.

    对灵活地图感兴趣?

    下载

  • 明星地方

    较新的插件是 Stellar Places.它专为使用 Google 地图创建、管理和显示位置而设计.

    添加新地点后，您可以访问列表视图和单个位置视图.这两个选项都会自动具有与之关联的地图.它还具有实时地图视图、拖动和放置标记重新定位，无限位置和地图，以及不会让您的 WordPress 网站陷入困境的干净、编写良好的代码.

    Stellar Places 插件与许多其他插件的显着区别在于它使用自定义帖子类型来管理位置.此外，大多数都没有直观的界面.

    对恒星的地方感兴趣?

    下载

这是一张地图的总结

从获取 API 密钥到使用插件创建精美地图，您应该能够快速将地图添加到您的 WordPress 网站.

这实际上取决于您显示地图的目的，以确定最适合您的路线.选项、自定义 和可用性有多种不同的形式.

我希望这篇文章能帮助您勾勒出一些想法.只需按照上面的说明操作即可.

google(46)地图(6)插件(302)
♥赞2

相关文章

发表回复