向您的网站添加带有标记的 Google 地图

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

简介

本教程介绍如何向网页添加带有标记的简单 Google 地图。该指南适合掌握 HTML 和 CSS 入门或中等知识以及 JavaScript 知识的人员。如需了解地图创建高级指南,请阅读开发者指南

以下是您按照本教程创建的地图。该标记位于乌鲁鲁卡塔丘塔国家公园的乌鲁鲁(也称为艾尔斯岩)上。

下文显示了创建本教程中的地图所需的完整代码。

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

试用示例

开始使用

要在网页上创建带有标记的 Google 地图,请按以下步骤操作:

  1. 创建 HTML 网页
  2. 添加带有标记的地图
  3. 获取 API 密钥

您需要使用网络浏览器。根据支持的浏览器列表中提供的平台,选择 Google Chrome(推荐)、Firefox、Safari 或 Edge 等知名浏览器。

第 1 步:创建 HTML 网页

以下是基本 HTML 网页的代码:

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

请注意,这是一个非常基本的页面,包含三级标题 (h3) 和一个 div 元素。您可以随意向网页添加任何内容。

了解代码

以下代码会创建由 head 和 body 组成的 HTML 网页。

<html>
 <head>
 </head>
 <body>
 </body>
</html>

您可以使用以下代码在地图上方添加三级标题。

<h3>My Google Maps Demo</h3>

以下代码定义了 Google 地图的页面区域。

<!--The div element for the map -->
<div id="map"></div>

在本教程的这一阶段,div 显示为一个灰色块,因为您尚未添加地图。以下代码介绍了用于设置 div 的大小和颜色的 CSS。

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

在上面的代码中,style 元素用于设置地图的 div 大小。将 div 宽度和高度设为大于 0px 的值,才能让地图显示出来。在本例中,div 设置为 400 像素,宽度设置为 100%,以显示网页的宽度。

第 2 步:添加带有标记的地图

本部分将介绍如何将 Maps JavaScript API 加载到网页中,以及如何自行编写使用该 API 添加带标记的地图的 JavaScript。

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

HTML

<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- 
     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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

试用示例

了解代码

在下面的代码中,script 会从指定网址加载 API。

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

在上面的代码中,callback 参数会在 API 加载后执行 initMap 函数。async 属性允许浏览器在 API 加载期间继续解析网页的其余部分。加载后,浏览器将暂停并立即执行脚本。key 参数包含您的 API 密钥。

如需了解如何在稍后获取自己的 API 密钥,请参阅第 3 步:获取 API 密钥

以下代码包含 initMap 函数,该函数可在网页加载时初始化和添加地图。使用 script 标记添加您自己的包含 initMap 函数的 JavaScript。

  function initMap() {}

添加 document.getElementById() 函数,以在网页上找到地图 div

以下代码会构造一个新的 Google 地图对象,并向地图添加属性,包括中心和缩放级别。请参阅关于其他属性选项的文档。

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});

在上面的代码中,new google.maps.Map() 创建一个新的 Google 地图对象。center 属性会告知 API 将地图居中放置的位置。

详细了解如何获取纬度/经度坐标,或将地址转换为地理坐标

zoom 属性用于指定地图的缩放级别。缩放:0 是最低的缩放,显示整个地球。将缩放值设置得更高一些,能够以较高的分辨率放大地球。

以下代码可将标记放置在地图上。position 属性用于设置标记的位置。

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});

详细了解标记:

第 3 步:获取 API 密钥

本部分介绍了如何使用您自己的 API 密钥向 Maps JavaScript API 对应用进行身份验证。

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

  1. 转到 Google Cloud Console

  2. 创建或选择项目。

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

  4. 凭据页面上,获取 API 密钥(并设置 API 密钥限制)。注意:如果您已有不受限制的 API 密钥或存在浏览器限制的密钥,可以使用该密钥。

  5. 为防止配额盗用和保护您的 API 密钥,请参阅使用 API 密钥

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

  7. 将本教程中的所有代码从本页面复制到文本编辑器中。

  8. 将网址中 key 参数的值替换为您自己的 API 密钥(即您刚刚获取的 API 密钥)。

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

  9. 使用以 .html 结尾的名称保存此文件,例如 index.html

  10. 在网络浏览器中加载 HTML 文件,只需将该文件从桌面拖动到浏览器中即可。或者,您也可以在大多数操作系统上双击该文件。

提示和问题排查

  • 您可以调整样式和属性等选项,以自定义地图。如需详细了解如何自定义地图,请参阅有关样式设置在地图上绘图的指南。
  • 使用网络浏览器中的开发者工具控制台测试并运行代码、阅读错误报告并解决代码存在的问题。
  • 使用键盘快捷键在 Chrome 中打开控制台:
    Command+Option+J(在 Mac 上)或 Ctrl+Shift+J(在 Windows 上)。
  • 按照以下步骤在 Google 地图上获取某个地点的纬度和经度坐标。

    1. 在浏览器中打开 Google 地图。
    2. 在地图上右键点击您要求坐标的确切位置。
    3. 从显示的上下文菜单中选择这儿有什么。 地图会在屏幕底部显示一张卡片。在卡片的最后一行找到纬度和经度坐标。
  • 您可以使用地理编码服务将地址转换为纬度和经度坐标。开发者指南详细介绍了地理编码服务使用入门