Google Map API使用详解（三）——Google Map基本常识（上）

1、简介

任何 Google Maps API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。

 

2、Google Map的“Hello, World”

开始学习 Google 地图 API 最简单的方式是看一个简单的示例。网页MyTest1.html显示了以中国人民大学为中心的 400x400 的地图。

即使在此简单的示例中，也需要注意五点：

（1）使用 script 标签包含 Google 地图 API JavaScript。

（2）创建名为“mapContainer”的 div 元素来包含地图。

（3）编写 JavaScript 函数创建“map”对象。

（4）将地图的中心设置为指定的地理点。

（5）从 body 标签的 onload 事件初始化地图对象。

下面说明了这些步骤。

 

3、加载 Google Map API

<script src=http://ditu.google.cn/maps?file=api&v=2&key=YOUR_API_KEY&sensor=true_or_false type="text/javascript">

</script>

http://ditu.google.cn/maps?file=api&v=2&key=YOUR_API_KEY网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签，使用注册 API 时收到的密钥。在此示例中，该密钥显示为“YOUR_API_KEY”。请注意，我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中，我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。

 

4、地图 DOM 元素

<div id="mapContainer" style="width: 400px; height: 400px"></div>

要让地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型(DOM)中获取此元素的引用执行此操作。

在上述示例中，我们定义名为“mapContainer”的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。

 

5、GMap2 --基本对象

var map = new GMap2(document.getElementById("mapContainer"));

GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图）。我们使用 JavaScript new 操作符创建此类的一个新实例（对象）。

当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。HTML 节点是 JavaScript document 对象的子对象，而且我们通过 document.getElementById() 方法获得该元素的引用。

此代码定义了一个变量（名为map），并将新GMap2对象赋值给该变量。函数GMap2() 称为“构造函数”，其定义如下所示：

(待续)