使用 JavaScript 创建一个简单的地图

Maps JavaScript API URL 参数

Google Maps JavaScript API 支持以下 URL 参数：

注意：完整的支持的区域代码和语言代码列表可在 Google Maps 开发者平台找到。

创建一个简单地图

要在网页上显示地图，首先需要预留一个位置。这可以通过在 HTML 文件中创建一个命名的 div 元素来实现。

在我们的代码示例中，div 元素被命名为 map。其写法如下：

1<div id="map"></div>

为了控制和自定义地图，还需要在浏览器的 DOM（文档对象模型）中获取对该元素的引用。

在 JavaScript 文件中，使用 document.getElementById() 方法获取 div 元素的引用。由于该元素的 ID 为 map，因此将 map 作为参数传入 document.getElementById() 方法，如下所示：

1document.getElementById("map")

Map 对象

地图由 google.maps.Map JavaScript 类表示。此类的对象在页面上定义一个单独的地图。要创建该类的新实例，可以使用 JavaScript 的 new 操作符。

以下是创建新地图对象并获取命名 div 元素引用的方法：

1map = new google.maps.Map(document.getElementById('map'), {...});

MapOptions 参数

Map 构造函数接收 MapOptions 参数，用于定义地图的中心位置以及用于更改地图视觉特征的样式集。

所有 MapOptions 参数均为可选，没有必需参数。以下是可传递给 Map 构造函数的一些可选参数：

我们可以不带任何参数构造 Map 对象，因为所有参数都是可选的。然而，要显示地图对象，zoom 和 center 参数是必需的。

这些参数可以在创建地图时提供，也可以在创建后使用 setValues() 方法设置。

以下是一个使用 center 和 zoom 参数构造 Map 对象的示例：

1map = new google.maps.Map(document.getElementById('map'), {
2    center: { lat: 47.6059, lng: -122.3345 },  // 西雅图坐标
3    zoom: 8
4});

加载 Maps JavaScript API

使用 script 标签加载 API。该标签可以内联添加到 HTML 文件中，也可以通过 JavaScript 动态添加。在本课程的示例中，采用内联方式，通过添加 script 标签实现，如下所示：

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

在 script 标签中设置了几个推荐的属性，用于通过此 API 嵌入地图。各属性说明如下：

• src 属性指定 Maps JS API 的加载地址。此示例中的 URL 包含两个参数：
  • key 参数是必须提供的 API 密钥。
  • callback 是在 Maps JavaScript API 完全加载后调用的全局函数名称。
• async 属性指示浏览器异步下载并执行脚本。当脚本执行完毕后，将调用 callback 参数指定的函数。

代码示例

让我们看一个简单的示例，开始学习 Maps JS API。以下地图示例展示了一个以华盛顿州西雅图为中心的地图。

以下是上述代码组件中 HTML 和 JavaScript 文件的简要说明：

在 HTML 文件中，我们执行了以下操作：

• 第 1 行：使用 <!DOCTYPE html> 声明应用为 HTML5。
• 第 9 行：创建一个 ID 为 map 的 div 元素，用于在网页上承载地图。
• 第 11–17 行：使用 script 标签加载 Maps JS API。

在 JavaScript 文件中，我们执行了以下操作：

• 第 3 行：定义一个名为 initMap 的函数，用于创建地图。
• 第 4 行：使用 document.getElementById("map") 获取 div 元素的 DOM 引用。
• 第 5–6 行：设置西雅图的坐标作为地图中心，并将缩放级别设为 8。