使用 HTML 添加带有标记的 Google 地图

简介

本教程介绍了如何使用 HTML 将带有标记的 Google 地图添加到网页中。以下便是您将在本教程的指导下创建的地图。两个标记分别位于加利福尼亚州的山景城和华盛顿州的西雅图。

开始操作

以下是使用 HTML 创建带有标记的 Google 地图的步骤：

  1. 获取 API 密钥
  2. 创建 HTML、CSS 和 JS 网页
  3. 添加地图
  4. 添加标记

您需要一个网络浏览器。请根据所用平台从受支持的浏览器列表中选择一个常见的浏览器，例如 Google Chrome（推荐）、Firefox、Safari 或 Edge。

第 1 步：获取 API 密钥

本部分介绍如何使用您的 API 密钥对应用进行身份验证，以便使用 Maps JavaScript API。

请按照下列步骤获取 API 密钥：

  1. 前往 Google Cloud 控制台。

  2. 创建或选择一个项目。

  3. 点击继续，启用 API 和任何相关服务。

  4. 在凭据页面上，获取 API 密钥（并设置 API 密钥限制）。注意：如果您已有不受限的 API 密钥或存在浏览器限制的密钥，可以使用相应密钥。

  5. 如需防止配额盗用并保护 API 密钥，请参阅使用 API 密钥。

  6. 启用结算功能。如需了解详情，请参阅用量和结算。

  7. 获得 API 密钥后，点击“YOUR_API_KEY”将密钥添加到以下代码段中。复制并粘贴引导程序脚本标记，以便在自己的网页上使用。

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

第 2 步：创建 HTML、CSS 和 JS 网页

下方代码可创建一个基本的 HTML 网页：

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

若要加载地图，您必须添加一个包含 Maps JavaScript API 引导加载程序的 script 标记，如以下代码段所示（添加您自己的 API 密钥）：

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap&libraries=map,marker">

剧透提醒：尝试 JSFiddle 上已完成的示例。

第 3 步：添加地图

若要将 Google 地图添加到网页中，请复制 HTML 元素 gmp-map 并将其粘贴到 HTML 网页的 body 中：

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

结果会得到如下地图：

您刚刚创建的地图以圣何塞都市区为中心。

第 4 步：添加标记

若要向地图添加标记，请使用 HTML 元素 gmp-advanced-marker。复制以下代码段，然后粘贴您在上一步中添加的整个 gmp-map。

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

以上代码会添加两个标记，并更改 gmp-map 上的 zoom 和 center 参数，以便更好地显示这些标记。使用高级标记需要地图 ID（可以使用 DEMO_MAP_ID）。

提示和问题排查

  • 您可以使用自定义样式来自定义地图。
  • 在网络浏览器中使用开发者工具控制台来测试和运行代码、阅读错误报告并解决代码存在的问题。
  • 使用以下键盘快捷键在 Chrome 中打开控制台：
    Command+Option+J（在 Mac 上）或 Ctrl+Shift+J（在 Windows 上）。

  • 按照以下步骤操作，获取 Google 地图上某个位置的纬度和经度坐标。

    1. 在浏览器中打开 Google 地图。
    2. 在地图上右键点击需要坐标的确切位置。
    3. 从显示的上下文菜单中选择这儿有什么？。地图会在屏幕底部显示一张卡片。在卡片的最后一行找到纬度和经度坐标。

  • 您可以使用地理编码服务将地址转换为纬度和经度坐标。开发者指南详细介绍了如何开始使用地理编码服务。

完整示例代码

以下是最终的地图，以及本教程使用的完整示例代码。

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html