• 主页
  • 文章
  • 主题
  • 如何在 WordPress 中轻松地将位置搜索添加到目录网站

如何在 WordPress 中轻松地将位置搜索添加到目录网站

已发表: 2021-02-15

有许多不同的方法可以改进您的目录网站，其中之一是启用基于位置的搜索。 如果您运行的目录或分类网站类似于 Yelp、TripAdvisor、Craigslist 或任何其他需要基于位置的搜索的类似网站，您可以通过将其与 Google 地图集成来轻松做到这一点。 对于某些用户来说，这是一项必不可少的功能，因为他们能够搜索他们所在地区的产品、服务或地点。 此外，谷歌地图平台有一个免费的每月限制，如果您的网站流量适中，这应该足够了。

在这个分步教程中，我们将解释如何将位置搜索添加到您的目录网站。 我们将使用 HivePress，这是一个免费的 WordPress 插件，可让您在眨眼之间创建一个目录网站。 此外，将使用 ListingHive，一个免费的 WordPress 目录主题，以及 HivePress 地理定位扩展，以与谷歌地图集成。

但是，如果您已经有一个使用其他插件或主题构建的目录网站，您可以跳过第一步并滚动到“如何修复”糟糕！ 有些不对劲。 此页面未正确加载 Google 地图””部分，用于解决最常见的错误。

那么，让我们进入第一步吧！

安装 HivePress

首先，您需要安装 HivePress。 您可以将其安装为 WordPress 中的任何其他免费插件。 只需导航到插件 > 添加新部分并使用搜索栏找到它，然后安装并最后通过单击“激活”按钮激活它。 完成安装后，您可以继续下一步 - 安装扩展。

此外，如果您觉得困难，您可以按照下面的截屏视频直接从 WordPress 仪表板安装 HivePress。

安装扩展

下一步是安装 Geolocation 扩展，以允许用户按位置搜索列表。 要安装它，只需将鼠标悬停在 HivePress 部分并单击“扩展”链接。 在列表中找到 Geolocation 扩展，点击“安装”按钮，最后激活该扩展。

此外，以下截屏视频显示了安装 HivePress 扩展的常用过程，因此您可以逐步进行操作。

创建新项目

完成插件安装和 Geolocation 扩展后，就可以在 Google Cloud Platform 上创建一个项目了。 假设您已经有一个 Google 帐户，您应该能够毫无问题地访问此仪表板。 但是，如果您没有，则必须注册一个 Google 帐户。

现在您需要通过单击“创建项目”按钮创建一个项目，然后为其命名，最后单击“创建”按钮。

在 Google Cloud Platform 上创建一个新项目。

设置帐单

现在，如果您没有 Google 计费帐户，则需要创建一个新帐户以启用项目计费。 但是，不用担心，您现在无需支付任何费用，这只是使用 Google Maps API 的要求之一。 只需点击链接并填写所有表单字段，包括付款方式详细信息。

您每月将获得 200 美元的免费信用额度，在大多数情况下，这足以支付在您的网站上使用 Google 服务的费用。 此外，可以设置限制和通知，因此您永远不会超过免费信用。 您可以查看定价，以便更好地了解其工作原理并确保您可以免费使用地图。

添加账单信息后，您将看到一个弹出窗口，其中包含您要启用的 API 类型。 如下图所示选择地图和地点，然后单击“启用”按钮。 此外，如果没有弹出窗口，您可以通过 Google API 库页面启用这些 API。

启用 Google API。

创建 API 密钥

下一步是为您的网站创建 API 密钥。 为此，请导航到 Credentials 页面并选择您的项目。

创建 API 密钥。

在 Credentials 页面上，您可以看到已经生成的 API Key。 如果您刚刚创建了结算帐户，则可能会自动生成一个密钥。 在这种情况下，您只需单击它即可进行编辑。 但是，如果页面上没有 API Key，您可以在Create Credentials > API key部分创建一个新的。

如何创建 API 密钥的示例。

接下来，您需要通过设置应用程序限制来设置您的 API 密钥。 这很重要，因为如果您只是嵌入密钥，它将以纯文本形式显示在您网站的源代码中。 这就是为什么您需要限制这一点，以便其他人无法将您的 API 密钥用于他们的项目。 为此，只需添加 HTTP 引荐来源网址以仅允许来自您网站的 API 请求。 只需设置您的网站地址，但还要在末尾添加“/*”部分以允许来自任何网站子页面的 API 请求，因此 Google 地图将适用于您网站的所有页面。

如何添加应用程序限制的示例。

现在您需要在下一个字段中设置 API 限制。 单击限制键并从下拉菜单中选择Maps JavaScript API、Places API、Geocoding API 。 如果某些提到的 API 未列出，您需要先在 Maps API 库页面上启用它们。 在下拉菜单中启用并选择所有三个 Google API 后，单击“保存”按钮。

如何添加 API 限制的示例。

启用谷歌地图集成

而已！ 您刚刚创建了一个 API 密钥，最后的润色是在您的网站上启用 Google 地图。 首先在APIs & Services > Credentials页面复制 API Key。 现在，如果您使用 HivePress 插件，请导航到您的 WordPress 仪表板，然后转到HivePress > 设置 > 集成 > Google 地图部分。 然后只需将您的 API 密钥粘贴到相应的字段中，然后单击“保存更改”按钮即可将位置搜索添加到您的网站。

如何将位置搜索添加到 WordPress 网站的示例。

恭喜！ 从此刻起，您的网站将与 Google 地图集成，现在您可以在列表部分中将位置添加到现有列表中。 此外，用户必须为新添加的列表设置位置。 此外，您的网站上还有一个位置搜索字段和一个 Google 地图，因此您可以尝试一下并按位置搜索一些列表。

在 WordPress 构建的网站上进行基于位置的搜索。
基于位置的搜索功能示例。

故障排除

如果您创建的 API 密钥有任何问题，地图可能会显示“糟糕！ 有些不对劲。 此页面未正确加载 Google 地图”错误。 这是一个很常见的错误，因为设置 API 密钥不是一个对用户非常友好的过程，而且用户经常会跳过一些设置步骤。 但是，如果您知道问题的根源，您可以立即修复它。

要找出该错误的原因，您需要打开 JavaScript 控制台。 您可以通过几次按键打开它，具体取决于您的浏览器。 查看 StackOverflow 上解释如何打开 JavaScript 控制台的答案。 如果您使用 Chrome 浏览器，只需按CTRL+Shift+I即可打开它。 打开它后，您应该会看到错误消息，类似于此。

如何解决“糟糕！有些不对劲。此页面未正确加载 Google 地图”错误

准确了解导致错误的原因很重要，以便您可以修复它。 可能有几个不同的错误，但我们将展示如何解决最常见的错误：

  • MissingKeyMapError;
  • 无效键映射错误；
  • ApiNotActivatedMapError;
  • RefererNotAllowedMapError。

但是，如果您遇到了上面未列出的错误，请查看 Google Maps API 错误消息文档以找出问题所在以及如何修复它。

MissingKeyMapError

此错误意味着根本没有 API 密钥，因此如果您想在您的网站上启用 Google 地图，则需要创建一个。 如果您收到此错误，我们建议您从第一步开始遵循本教程，以便创建 API 密钥并正确设置地图。

无效键映射错误

当您使用错误的 API 密钥时会出现此错误。 很可能您已经创建了它，但没有正确地将它添加到您的网站。 要修复此错误，请转到凭据页面并复制 API 密钥。

Google API 密钥的示例。

如果您使用 HivePress 插件及其 Geolocation 扩展，请转到WordPress 仪表板 > HivePress > 设置 > 集成 > Google 地图部分，将您的 API 密钥粘贴到相应的字段中，然后单击“保存更改”按钮。

ApiNotActivatedMapError

如果您收到此类错误，则表示您未启用所需的 API。 Google Maps API 库中有许多不同的 API，因此您需要前往库并启用项目所需的 API。 启用它们后，请记住还将它们添加到凭据部分的 API 密钥设置中的 API 限制部分。

例如，如果您使用带有 Geolocation 扩展的 HivePress 插件，并且想要将位置搜索添加到您的目录网站，则需要启用并允许访问以下 Google API： Maps JavaScript API、Places API、Geocoding API 。 您可以查看带有必要 API 的屏幕截图。

RefererNotAllowedMapError

如果未正确设置 API 引用者限制，则会发生此错误。 例如，如果地图在您网站的一个页面上有效，而在其他页面上无效，那么您很可能面临同样的问题。

好消息是您已经正确设置并输入了 API 密钥，并且您只需要修复一个小细节。 转到凭据页面并单击您的 API 密钥进行编辑。 在“应用程序限制”部分中，选择“HTTP 引荐来源网址（网站）”。 然后填写如下所示的网站限制，但将“example”替换为您的域名，然后单击“保存”按钮。 设置最长可能需要 5 分钟才能生效。

如何为 API Key 添加网站限制的示例

在末尾添加“/*”部分以允许来自任何网站子页面的 API 请求非常重要，因此 Google 地图可以在您网站的所有页面上运行。

仍然不起作用

  • 如果您更改 API 密钥限制中的某些内容 - 最多等待 5 分钟以使设置生效；
  • 如果仍然有错误，请再次检查 JavaScript 控制台以获取更多详细信息。 解决第一个问题后可能会出现错误；
  • 您也可以尝试清除浏览器缓存。

结论

而已！ 他们说，有志者事竟成。 您刚刚向目录网站添加了位置搜索功能，现在您的用户可以按位置搜索列表。 对于大多数目录来说，这是一个非常重要的功能。 虽然添加谷歌地图可能看起来有点复杂，但它是值得的。 一旦您将位置搜索添加到您的网站，它将对用户体验产生积极影响。 用户体验对于任何网站都非常重要，因为它是良好流量的基石之一。

如您所见，您无需任何编码技能即可将 Google 地图集成到您的网站中。 如果您还没有决定使用什么插件来构建您的目录网站，您可以考虑 HivePress。 它允许您创建任何类型的目录和列表网站。 此外，它还包括一个免费的扩展程序，可以实现基于位置的搜索，以及一些您可能会觉得有用的免费功能。

此外，请随时查看我们的文章：

  • 最受欢迎的免费 WordPress 目录插件
  • 热门 WordPress 目录主题
  • 构建 WordPress 目录网站时要避免的错误