谷歌地图二次开发指南

开发人员指南

地图基础知识

1简介

2Google 地图的“Hello, World”

2加载Google 地图API

2地图DOM 元素

2GMap2 - 基本对象

2初始化地图

2加载地图

3经度和纬度

4地图属性

5地图交互

6信息窗口

简介

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

Google 地图的“Hello, World”

开始学习Google 地图API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的500x300 的地图。

"/TR/xhtml1/DTD/xhtml1-strict.dtd">

src="/maps?file=api&v=2&key=abcdefg&sensor=t rue_or_false"

type="text/javascript">

您可以查看此示例及下载、编辑和调试该示例，但必须将该文件中的密钥替换为您自己的Google 地图API 密钥。（如果注册了特定目录的密钥，也可以将其用于所有子目录。）即使在此简单的示例中，也需要注意五点：

7使用script标签包含Google 地图API JavaScript。

8创建名为“map_canvas”的div元素来包含地图。

9编写JavaScript 函数创建“map”对象。

10将地图的中心设置为指定的地理点。

11从body标签的onLoad事件初始化地图对象。

下面说明了这些步骤。

加载Google 地图API

src="/maps?file=api&v=2&key=abcdefg&sensor=true_or_fal se"

type="text/javascript">

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

地图DOM 元素

要让地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为div的元素并

在浏览器的文档对象模型(DOM) 中获取此元素的引用执行此操作。

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

GMap2 - 基本对象

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

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

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

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

构造函数说明

GMap2(container, opts?) 在通常是一个DIV元素的指定HTML container内创建新地图。您也可以通过opts参数传递GMap2Options类型的可选参数。

请注意因为JavaScript 是松散类型的语言，我们可以不填写构造函数的任何可选参数，此处也未这样做。

初始化地图

map.setCenter(new GLatLng(39.9493,116.3975),13);

通过GMap2构造函数创建地图后，我们需要再做一件事：将其初始化。初始化通过地图的setCenter()方法完成。setCenter()方法要求有GLatLng坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。加载地图

当HTML 页面显示时，文档对象模型(DOM) 即会扩展，接收其他外部图像和脚本并将其合并到document对象中。为确保我们的地图仅放置在完全加载后的页面上，我们仅在HTML 页面的元素收到onload事件后才执行构造GMap2对象的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。onload属性是事件处理程序的示例。Google 地图API 还提供了大量事件可以用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。

GUnload()函数是用来防止内存泄漏的实用工具函数。