使用 JavaScript 添加带标记的 Google 地图

简介

本教程介绍了如何向网页添加带标记的简单 Google 地图,适合掌握了 HTML 和 CSS 的初级或中级知识的人员, 对 JavaScript 有一定了解。

下面便是您将在本教程的指导下创建的地图。标记位于乌鲁鲁卡塔丘塔国家公园中的乌鲁鲁(也称为“艾尔斯岩”)。

入门指南

在网页上创建带标记的 Google 地图需要执行以下三个步骤:

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

您需要一个网络浏览器。请根据所用平台从受支持的浏览器列表中选择一个常见的浏览器,例如 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>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "YOUR_API_KEY",
        v: "weekly",
        // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
        // Add other bootstrap parameters as needed, using camel case.
      });
    </script>
    

第 2 步:创建 HTML 网页

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

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>

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

了解代码

在示例的这一阶段,我们有以下变化:

  • 使用 !DOCTYPE html 声明将应用声明为 HTML5。
  • 创建了名为“map”的 div 元素放置地图。
  • 使用引导加载程序加载器加载了 Maps JavaScript API。

以 HTML5 形式声明您的应用

我们建议您在自己的 Web 应用内声明真正的 DOCTYPE。 在本文的示例中,我们使用 简单的 HTML5 DOCTYPE,如下所示:

<!DOCTYPE html>

当前大多数浏览器都会呈现使用此 DOCTYPE 声明的内容 “标准模式”这意味着您的应用应 跨浏览器兼容DOCTYPE 还设计为可适当降级; 无法理解该模式的浏览器会将其忽略,并使用“怪异模式”更改为 展示内容。

请注意,某些 CSS 在怪异模式下可正常运作,在标准模式下则是无效的。具体而言,所有百分比形式的尺寸都必须从父级块元素继承,并且如果其中任一祖先元素未能指定尺寸,则假定其尺寸为 0 x 0 像素。对于 因此,我们添加了以下 style 声明:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

创建 div 元素

要在网页上显示地图,我们必须为其留出一个位置。通常, 为此,我们需要创建一个命名的 div 元素并获取对该元素的引用, 元素。

以下代码可为 Google 地图定义一个页面区域。

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

在教程的这一阶段,由于您尚未添加地图,因此 div 仅显示为一个灰色块。以下代码描述了用于设置 div 大小和颜色的 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 */
}

在以上代码中,style 元素用于设置地图的 div 大小。将 div 的宽度和高度设置为大于 0px 的值,才能让地图显示出来。在本课中, 将 div 的高度设置为 400 像素,将宽度设置为 100%,以显示 以网页宽幅展示请注意,div 通常会 ,并且空 div 的高度通常为 0。为此 因此必须始终明确设置 div 的高度。

加载 Maps JavaScript API

引导程序加载器会准备 Maps JavaScript API 以进行加载(在调用 importLibrary() 之前不会加载任何库)。

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

第 3 步:添加带标记的地图

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

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();

在以上代码中,调用 initMap() 函数时会加载 MapAdvancedMarkerView 库。

了解代码

在本教程的这一阶段,我们完成以下操作:

  • 定义了一个在 div 中创建地图的 JavaScript 函数。
  • 创建了 AdvancedMarkerElement,用于向地图添加标记。

添加地图

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

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

每个地图都有两个必需选项:centerzoom。在上述 代码,new Map() 会创建一个新的 Google 地图对象。center 属性用于告知 API 放置地图的中心位置。

zoom 属性用于指定地图的缩放级别。0 是最低缩放级别,会显示整个地球。调高缩放级别值,就能以更高的分辨率放大地球。

以单幅图像形式提供整个地球的地图需要 巨幅地图或分辨率极低的小地图。因此,地图图片 在 Google Maps 和 Maps JavaScript API 中被分解为地图“图块” 和“缩放级别”在较低的缩放级别,一小组地图图块便可覆盖广泛的 区域;在较高的缩放级别下,图块的分辨率就更高, 范围更小以下列表显示了您可以使用的大致信息级别 在每个缩放级别看到:

  • 1:世界
  • 5:大陆或洲
  • 10:城市
  • 15:街道
  • 20:建筑物

以下三幅图像反映了东京同一位置在缩放级别为 0、 7 和 18。

添加标记

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

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});

完整示例代码

在此处查看完整的示例代码:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Add Map</title>

    <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>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>

试用示例

详细了解标记:

提示和问题排查

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

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