问题排查

API 密钥和结算错误

在某些情况下，可能会显示暗色地图或“负片”效果的街景图像，并带有“仅用于开发目的”的文字水印。如果出现此行为，通常说明存在 API 密钥或结算方面的问题。为了使用 Google Maps Platform 产品，必须为账号启用结算功能，并且所有请求都必须包含有效的 API 密钥。以下流程有助于排查此问题：

API 密钥以 key 参数的形式在网址中传递，用于加载 Maps JavaScript API。您可以通过以下几种方法检查您是否使用了 API 密钥：

  • 使用 Google Maps Platform API Checker Chrome 扩展程序。通过这种方法，您可以确定自己的网站是否正确实现了获得许可的 Google Maps API。
  • 如果您使用某个库或插件加载 Maps JavaScript API，请检查该库的设置并查找 API 密钥选项。
  • 检查浏览器中的错误。如果您看到以下消息，则说明您未正确使用 API 密钥：

对于 Web 开发者：

  • 如果您有权访问应用的源代码，请查找用于加载 Maps JavaScript API 的 <script> 代码。加载 Maps JavaScript API 时，请将以下代码中的 YOUR_API_KEY 替换为您的 API 密钥。 
      <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
  • 在浏览器中检查您的网站生成的网络流量。在 Chrome 中，可使用开发者工具的网络标签页进行查看。在该标签页中，您会看到您的网站发出的网络请求。使用 Maps JavaScript API 发出的请求将位于路径 maps/api/js 下。在这里，您可以确认请求是否使用了 key 参数。查看网络标签页时，按 maps/api/js 过滤网络流量可能会很有帮助。

如需获取 API 密钥，请点击下面的按钮。如果您没有看到引导式设置，请按照 Google Maps Platform 使用入门中的完整说明操作。
前往入门说明

太棒了！接下来请确认您的项目是否关联了结算账号。

前往 Google Cloud 控制台的 “结算”页面，然后选择创建 API 密钥时所用的项目。 如要确认密钥是否与该项目相关联，请执行以下操作：

  1. 通过点击 Google Maps Platform > 凭据下的左侧边栏，前往凭据部分。
  2. 检查您的网站上当前使用的 API 密钥是否列出。如果未列出，请切换为其他项目，然后查看凭据。
  3. 如果找不到与 API 密钥相关联的项目，则说明您可能已无法访问相应项目。请向组织中的其他人寻求帮助。如果找不到原始项目，您应该：
    1. 创建新项目。可以通过以下方法完成此操作：从项目列表中选择新建项目，或者在 Resource Manager 页面中选择创建项目。
    2. 创建新的 API 密钥。您可以在凭据页面上执行此操作。进入此页面后，点击创建凭据，然后选择 API 密钥。

在 Cloud 控制台中找到您的项目后，前往左侧菜单中的结算部分，查看是否已有关联的结算账号。

前往 Cloud 控制台的“启用结算功能”页面，然后将结算账号添加到您的项目。如需了解详情，请参阅 Google Maps Platform 使用入门。

太棒了！请确保提供的结算方式有效。

您可以在 Cloud 控制台中 添加、移除或更新付款方式。

如果您为任何 API 设置了每日上限（防止用量意外增加的常见做法），可以通过提高每日上限来解决此问题。

您可以前往 Cloud 控制台的“API 和服务”信息中心，查看每日上限。然后：

  1. 根据系统提示选择一个项目。
  2. 从列表中选择一个 API，然后点击配额标签页。

具有 IP 地址限制的 API 密钥只能用于适合从服务器端使用的网络服务（例如 Geocoding API 和其他网络服务 API）。大部分此类网络服务在 Maps JavaScript API 中都有等效服务（有关示例，请参阅地理编码服务）。如需使用 Maps JavaScript API 客户端服务，您需要单独创建一个可使用 HTTP 引荐来源网址限制进行保护的 API 密钥（请参阅获取、添加和限制 API 密钥）。

如果您的代码不能正常运行：

为帮助您确保地图代码正常运行，Brendan Kenny 和 Mano Marks 在此视频中介绍了一些常见错误及相应解决方法。

  • 查找拼写错误。请注意，JavaScript 语言区分大小写。
  • 检查基础环节，因为一些最常见的问题往往发生在地图创建的初始阶段。例如：
    • 确认您已在地图选项中指定 zoom 和 center 属性。
    • 确保您已声明用于容纳出现在屏幕上的地图的 div 元素。
    • 确保地图的 div 元素已设置高度。默认情况下，div 元素创建时的高度为 0，因此不可见。
    如需了解参考实现，请参阅我们的示例。
  • 使用 JavaScript 调试程序（例如 Chrome 开发者工具中的调试程序）发现问题。首先查看 JavaScript 控制台中是否存在错误。
  • 将问题发布到 Stack Overflow 中。如需了解有关如何发布优质问题的指南，请访问支持页面。