谷歌地图开发

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Google Maps JavaScript API Example</title>
   <script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
           type="text/javascript"></script>
    <script type="text/javascript">

   function initialize() {
     if (GBrowserIsCompatible()) {
       var map= new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.9493, 116.3975), 13);
     }
   }

   </script>
</head>
<body onload="initialize()" onunload="GUnload()">
   <div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

您能够查看此示例及下载、编辑和调试该示例，但必须将该文件中的密钥替换为您本身的 Google 地图 API 密钥。（若是注册了特定目录的密钥，也能够将其用于全部子目录。）

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

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

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

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

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

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

下面说明了这些步骤。

加载 Google 地图 API

http://ditu.google.cn/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 页面的 <body> 元素收到 onload 事件后才执行构造 GMap2 对象的函数。这样作能够避免出现不可预期的行为，并使咱们能够对地图绘制的方式和时间进行更多控制。

onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件能够用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。

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

经度和纬度

既然如今已经有地图了，咱们还须要一种方法来引用地图上的位置。在 Google 地图 API 中，GLatLng 对象提供了此类机制。能够构造一个 GLatLng 对象，按照制图学的惯例以 {经度, 纬度} 的顺序传递参数：

var myGeographicCoordinates= new GLatLng(myLatitude, myLongitude)

注意：将“地址”转变为地理点的过程称为“地址解析”，将在“Google 地图 API 服务”部分中详细讨论。

就像它可用于轻松地引用地理点同样，它也可用于定义对象的地理边界。例如，地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口能够经过四个角上的矩形点来定义。GLatLngBounds 对象提供了这个功能，经过使用分别表示边界框的西南角和东北角的两个 GLatLng 对象定义一个矩形区域来实现。

GLatLng 对象在 Google 地图 API 中用途普遍。例如，GMarker 对象在其构造函数中具备 GLatLng，并在地图上的指定地理位置放置标记“叠加层”。

下面的示例使用 getBounds() 返回当前视口，而后在地图上的这些边界内随机放置 10 个标记：

function initialize() {
var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Add 10 markers to the map at random locations
var bounds= map.getBounds();
var southWest= bounds.getSouthWest();
var northEast= bounds.getNorthEast();
var lngSpan= northEast.lng() - southWest.lng();
var latSpan= northEast.lat() - southWest.lat();
for (var i= 0; i< 10; i++) {
   var point= new GLatLng(southWest.lat() + latSpan* Math.random(),
        southWest.lng() + lngSpan* Math.random());
    map.addOverlay(new GMarker(point));
}
}

查看示例 (map-markers.html)

注意：有关 GMarker 对象的详细信息位于叠加层部分中。

地图属性

默认状况下，在 Google 地图 API 中，地图使用标准的“绘制”图块显示。可是，Google 地图 API 也支持其余地图类型。如下是标准地图类型：

· G_NORMAL_MAP- 默认视图

· G_SATELLITE_MAP - 显示 Google 地球卫星图像

· G_HYBRID_MAP - 混合显示普通视图和卫星视图

· G_DEFAULT_MAP_TYPES - 这三个类型的数组，在须要重复处理的状况下很是有用

可使用 GMap2 对象的 setMapType() 方法设置地图类型。例如，下面的代码将地图设置为使用 Google 地球的卫星视图：

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

地图还包含对了解状况很是有用的大量属性。例如，要了解当前视口的尺寸，可以使用 GMap2 对象的 getBounds() 方法来返回 GLatLngBounds 值。

每一个地图还包含一个“缩放级别”，用于定义当前视图的分辨率。在普通地图视图内，可使用 0（最低缩放级别，在地图上能够看到整个世界）到 19（最高缩放级别，能够看到独立建筑物）之间的缩放级别。缩放级别因所查看地区而异，由于地球上某些地区的数据比其余地区更详细。在卫星视图中可使用多达 20 个缩放级别。

能够经过使用 GMap2 对象的 getZoom() 方法检索地图当前使用的缩放级别。

关于缩放级别、地图图块以及建立本身的自定义地图类型的更多信息，请参阅图块叠加层部分。

地图交互

既然如今有了 GMap2 对象，就能够与之进行交互了。基本地图对象的外观和行为与您在 Google 地图网站上交互的地图很是类似，并带有大量内置行为。GMap2 对象还提供了大量配置方法来改变地图对象自己的行为。

默认状况下，和在 http://ditu.google.cn 上同样，地图对象会对用户的活动作出反应。但您可使用大量实用工具方法改变此行为。例如，GMap2.disableDragging() 方法禁止了点击并拖拽地图到新位置的功能。

您还能够经过编程与地图交互。GMap2 对象支持能够直接改变地图状态的大量方法。例如，setCenter()、panTo 和 zoomIn() 方法经过编程来操做地图，而不是经过用户交互来操做地图。

下面的示例显示一个地图，等待两秒钟，而后平移到新中心点。panTo 方法将地图中心设置在指定点处。若是指定点位于地图的可见部分，则地图会平稳地平移到该点，不然会跳至该点。

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
window.setTimeout(function() {
map.panTo(new GLatLng(39.927, 116.407));
}, 1000);

查看示例 (map-animate.html)

能够经过使用 Google 地图 API 事件进行更复杂的交互。

信息窗口

全部使用 Google 地图 API的地图都有可能显示类型为 GInfoWindow 的单个“信息窗口”，该窗口在地图上端以浮动窗口显示 HTML 内容。信息窗口有点像漫画书上的文字气球；它有一个内容区域和锥形引线，引线的头在地图的指定点上。点击 Google 地图上的标记能够看到活动的信息窗口。

GInfoWindow 对象没有构造函数。当建立地图时，会自动建立一个信息窗口并将其附加到地图上。对于指定的地图，一次不能显示多个信息窗口，但能够移动信息窗口并能够更改其内容（若是须要）。

GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素做为参数。HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。

GMap2 的 openInfoWindowHtml() 方法类似，可是它使用 HTML 字符串做为其第二个参数而不是 DOM 元素。

要建立信息窗口，请调用 openInfoWindow 方法，并向其传递位置和要显示的 DOM 元素。下面的示例代码显示了一个信息窗口，该窗口锚定在地图中心，内容为一条简单消息“Hello, world”。

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));

查看示例 (map-infowindow.html)

有关信息窗口的完整文档，请查阅 Google 地图 API 参考

事件

1 地图事件概述

2 事件监听器

3 在事件监听器中使用闭包

4 在事件中使用传递的参数

5 将事件绑定到对象

6 监听 DOM 事件

7 删除事件监听器

地图事件概述

浏览器中的 JavaScript 是“事件驱动的”，这表示 JavaScript 经过生成事件来响应交互，并指望程序可以“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互能够建立在 DOM 内传播的事件。对某些事件感兴趣的程序会为这些事件注册 JavaScript 事件监听器，并在接收这些事件时执行代码。

Google 地图 API 经过为地图 API 对象定义自定义事件而添加到此事件模型中。请注意，地图 API 事件是独立的，与标准 DOM 事件不一样。可是，因为不一样的浏览器实现不一样的 DOM 事件模型，所以地图 API 还提供监听和响应这些 DOM 事件但无需处理各类跨浏览器特性的机制。

事件监听器

经过使用 GEvent 命名空间中的实用工具函数注册事件监听器，来处理 Google 地图 API 中的事件。每一个地图 API 对象都导出大量已命名的事件。例如，GMap2 对象导出 click、dblclick 和 move 事件，以及其余许多事件。每一个事件都在指定的环境下发生，而且能够传递标识环境的参数。例如，当用户在地图对象中移动鼠标时，会触发 mousemove 事件，而且该事件会传递鼠标所在地理位置的 GLatLng。

有关 GMap2 事件及其生成的参数的完整列表，请参见 GMap2.Events。

注册用来获取这些事件的相关通知的监听器，请使用静态方法 GEvent.addListener()。该方法有三个参数，一个对象，一个待监听事件以及一个在指定事件发生时调用的函数。例如，每当用户点击地图时,下面的代码段都会显示警告:

var map= new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
GEvent.addListener(map, "click", function() {
alert("您点击了地图。");
});

查看示例 (event-simple.html)

监听器也可以捕获事件的环境。在下面的示例代码中，显示用户拖动地图后地图中心的经度和纬度。

var map= new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
var center= map.getCenter();
document.getElementById("message").innerHTML= center.toString();
});
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

查看示例 (event-context.html)

在事件监听器中使用闭包

当执行事件监听器时，一个经常使用的好方法就是将私有数据和持久性数据附加到一个对象。JavaScript 不支持“私有”实例数据，但它却支持闭包，闭包容许内部函数访问外部变量。在事件监听器中，访问一般不附加到发生事件的对象的变量时，闭包很是有用。

下面的示例在事件监听器中使用函数闭包将加密消息分配给一组标记。点击每一个标记均可以看到加密消息的一部分，该消息并不包含在标记自身内部。

查看示例 (event-closure.html)

在事件中使用传递的参数

地图 API 事件系统中的许多事件在触发事件时都会传递参数。例如，若是地图点击发生在叠加层上，GMap2“点击”事件会传递 overlay 和 overlaylatlng；不然，它传递地图坐标的 latlng。能够经过将指定的符号直接传递给事件监听器中的函数来访问这些参数。

在下面的示例中，咱们首先进行测试，即检查是否认义了 latlng 参数，以确保点击发生在地图图块上；这样，咱们就能够在坐标点的上方打开一个信息窗口，并在信息窗口中显示转化为像素的坐标以及地图的缩放级别。

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
   var myHtml= "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",
缩放级别:" + map.getZoom();
    map.openInfoWindow(latlng, myHtml);
}
});
map.addControl(new GSmallMapControl());    //增长控制条
map.addControl(new GMapTypeControl());      //增长卫星地图和普通地图的显示

查看示例 (event-arguments.html)

将事件绑定到对象方法

当您但愿将事件监听器附加到对象的特定实例时，函数很是有用。若是您不但愿这样，而是但愿响应事件时对象的全部实例都调用某方法，可使用 GEvent.bind()。在下面的示例中，MyApplication 的实例将地图事件与其成员方法绑定在一块儿，当触发事件时会修改类状态：

function MyApplication() {
this.counter= 0;
this.map= new GMap2(document.getElementById("map"));
this.map.setCenter(new GLatLng(39.9493, 116.3975), 13);
GEvent.bind(this.map, "click", this, this.onMapClick);
}

MyApplication.prototype.onMapClick= function() {
this.counter++;
alert("这是您第" + this.counter+ " " +
"次点击"
}

var application= new MyApplication();

查看示例 (event-bind.html)

监听 DOM 事件

Google 地图 API 事件模型建立并管理本身的自定义事件。可是，DOM 也会根据当前使用的特定浏览器事件模型建立和调度本身的事件。若是您但愿捕获并响应这些事件，Google 地图 API 提供的独立于浏览器的包装器能够监听和绑定 DOM 事件而不须要自定义代码。

GEvent.addDomListener() 静态方法为 DOM 节点上的 DOM 事件注册事件处理程序。一样，GEvent.bindDom() 静态方法容许您为类实例上的 DOM 事件注册事件处理程序。

删除事件监听器

再也不须要事件监听器时，应将其删除。甚至在事件只需触发一次的状况下，也可能须要删除。删除闭包内的匿名函数所定义的事件监听器可能很困难。可是，addListener()、addDomListener()、bind() 和 bindDom() 函数会返回 GEventListener 句柄，可用来最终取消注册处理程序。

下面的示例经过在地图上放置标记来响应点击。任何后续点击均可删除事件监听器。请注意，这会致使再也不执行 removeOverlay() 代码。另请注意，您甚至能够从事件监听器自身内部删除事件监听器。

查看示例 (event-removal.html)

控件

1 地图控件概述

2 向地图添加控件

3 在地图上放置控件

4 修改标准控件的结构

5 建立自定义控件

控件概述

http://ditu.google.cn 上的地图包含容许用户与地图交互的 UI 元素，这些元素称为“控件”。您能够在 Google 地图 API 应用程序中添加这些控件的多种组合。您还能够经过子类化 GControl 类来构建本身的自定义控件。

地图 API 带有大量能够在地图中使用的内置控件：

· GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认状况下显示在地图的左上角。

· GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认状况下显示在地图的左上角。

· GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。

· GScaleControl - 地图比例尺

· GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮

· GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。

· GOverviewMapControl - 位于屏幕一角的可折叠概览地图。

全部这些控件都基于 GControl 对象。

GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊状况，由于它们还能够进行配置。这些控件增长的功能能够更改 Google 地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息，请参见修改标准控件的结构。

下面是当前支持的地图类型列表：

· G_NORMAL_MAP 显示 Google 地图默认的普通二维图块

· G_SATELLITE_MAP 显示拍摄的图块

· G_HYBRID_MAP 同时显示拍摄的图块和普通（突出显示道路、城市名等明显地图特征）图块

· G_PHYSICAL_MAP 根据地形信息显示实际地图图块

若是您有图像或者已经定义好的叠加层，也能够定义本身的自定义地图类型。

默认状况下，Google 地图 API 提供三种地图类型：G_NORMAL_MAP、G_SATELLITE_MAP 和 G_HYBRID_MAP。您能够经过这两种方式来改变地图上可用的地图类型：使用 GMap2.removeMapType() 删除地图类型；使用 GMap2.addMapType() 添加地图类型。不管您什么时候建立地图类型控件，它都使用当前地图上已经添加的地图类型，并经过控件让用户能够切换这些地图类型。请注意，您必须在添加地图类型控件（主要指 GHierarchicalMapTypeControl）以前指定各地图类型之间的阶层关系，以便地图类型控件能够准确反映这些关系。

使用下面的代码可将 G_HYBRID_MAP 从添加到地图上的可用地图类型中删除，只剩下两种地图类型。添加 GMapTypeControl 后，便只有这两种地图类型可用。

var map= new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(39.927, 116.407), 11);
var mapControl= new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());

查看示例 (control-maptypes.html)

向地图添加控件

可使用 GMap2 方法 addControl() 向地图添加控件。例如，要将 Google 地图上显示的平移/缩放控件添加到您的地图中，您能够在您的地图初始化代码中添加下面这行语句：

map.addControl(new GLargeMapControl());

能够向地图添加多个控件。在本例中，咱们添加内置 GSmallMapControl 和 GMapTypeControl 控件，它们分别能够平移/缩放地图以及切换“地图”与“卫星”这两种类型。在地图中添加标准控件后，它们即刻彻底生效。

var map= new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

查看示例 (control-simple.html)

在地图上放置控件

addControl 方法有第二个可选的参数 GControlPosition，可用于指定控件在地图上的位置。它能够是如下值之一，这些值分别指定要放置控件的地图某个角：

· G_ANCHOR_TOP_RIGHT

· G_ANCHOR_TOP_LEFT

· G_ANCHOR_BOTTOM_RIGHT

· G_ANCHOR_BOTTOM_LEFT

若是不包含此参数，则地图 API 会使用控件指定的默认位置。

GControlPosition 还能够指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。

本示例会将 GMapTypeControl 添加到地图的右上角，填充为 10 个像素。双击地图上的任何位置能够删除该控件，将其放在地图的右下角。

var map= new GMap2(document.getElementById"map_canvas"));
var mapTypeControl= new GMapTypeControl();
var topRight= new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight= new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
map.removeControl(mapTypeControl);
map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

查看示例 (control-positioning.html)

请参见 GControlPosition 类参考以了解详细信息。

修改标准控件的结构

Google 地图 API 内的大多数控件都提供具备标准行为的简单控件。可是，有些控件须要初始化才能正常使用。例如，GHierarchicalMapTypeControl 一般须要必定的初始化才能在层叠“菜单”中以正确顺序显示地图类型。

此示例将带有十字准线图块层叠加层的 G_PHYSICAL_MAP 地图类型添加到地图中，而后建立 GHierarchicalMapTypeControl 来排列添加到地图的其余地图类型。

// define the crosshair（标准线） tile layer and its required functions
var crossLayer= new GTileLayer(new GCopyrightCollection(""), 0, 15);

crossLayer.getTileUrl= function(tile, zoom) {
return "./include/tile_crosshairs.png";
}
crossLayer.isPng= function() {return true;}

// Create a new map type incorporating the tile layer
var layerTerCross= [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer];
var mtTerCross= new GMapType(layerTerCross,
G_PHYSICAL_MAP.getProjection(), "Ter+");

var map= new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(39.9493, 116.3975), 4);
var mapControl= new GHierarchicalMapTypeControl();

// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "文字标记", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "十字交叉");

// Add control after you've specified the relationships
map.addControl(mapControl);

map.addControl(new GLargeMapControl());

查看示例 (control-initialization.html)

自定义地图控件

Google 地图 API 还容许您经过子类化 GControl 来建立自定义地图控件。（您并无在 JavaScript 中实现一个“子类化”对象，而是把这个对象的 prototype 指定为 GControl 对象的实例。）

要建立可用的自定义控件，您须要实如今该类中定义的至少两个方法：initialize() 和 getDefaultPosition()。initialize() 方法必须返回 DOM 元素，而 getDefaultPosition() 方法必须返回类型为 GControlPosition 的对象。

全部自定义的地图控件中的 DOM 元素最终都应该添加到地图容器（也是 DOM 元素）中去，这个地图容器能够经过 GMap2 getContainer() 方法得到。

在此示例中，咱们建立一个简单的缩放控件，它具备文本连接，而不是标准 Google 地图缩放控件中使用的图形图标。

// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).

// We define the function first
function TextualZoomControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype= new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize= function(map) {
var container= document.createElement("div");

var zoomInDiv= document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("放大"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
});

var zoomOutDiv= document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("缩小"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
});

map.getContainer().appendChild(container);
return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition= function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_= function(button) {
button.style.textDecoration= "underline";
button.style.color= "#0000cc";
button.style.backgroundColor= "white";
button.style.font= "small Arial";
button.style.border= "1px solid black";
button.style.padding= "2px";
button.style.marginBottom= "3px";
button.style.textAlign= "center";
button.style.width= "6em";
button.style.cursor= "pointer";
}

var map= new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);

查看示例 (control-custom.html)

地图叠加层

1 地图叠加层概述

2 标记

2 图标

3 折线

4 多边形

5 底面叠加层

6 图块叠加层

7 层

8 自定义叠加层

地图叠加层概述

叠加层是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。叠加层用于反映您“添加”到地图上以指明点、线或区域的对象。。

地图 API 有以下几种叠加层：

· 地图上的点使用标记来显示，一般显示自定义图标。标记是 GMarker 类型的对象，而且能够利用 GIcon 类型的对象来自定义图标。

· 地图上的线使用折线（表示点的集合）来显示。线是类型为 GPolyline 的对象。

· 地图上的区域显示为多边形（若是是任意形状的区域）或底面叠加层（若是是矩形区域）。多边形相似于闭合的折线，所以能够是任何形状。地面叠加层一般用于地图上与图块有直接或间接关联的区域。

· 地图自己使用图块叠加层显示。若是您有本身的系列图块，可使用 GTileLayerOverlay 类来改变地图上已有的图块，甚至可使用 GMapType 来建立您本身的地图类型。

· 信息窗口也是一种特殊的叠加层。可是请注意，信息窗口会自动添加到地图中，而且地图只能添加一个类型为 GInfoWindow 的对象。

每一个叠加层都实现 GOverlay 接口。可使用 GMap2.addOverlay() 方法向地图添加叠加层，使用 GMap2.removeOverlay() 方法删除叠加层。（请注意，默认状况下信息窗口会自动添加到地图。）

标记

标记标识地图上的点。默认状况下，它们使用 G_DEFAULT_ICON（您也能够指定自定义图标）。GMarker 构造函数将 GLatLng 和 GMarkerOptions（可选）对象做为参数。

标记设计为可交互。例如，默认状况下它们接收 "click" 事件，经常使用于在事件侦听器中打开信息窗口。

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Add 10 markers to the map at random locations
var bounds= map.getBounds();
var southWest= bounds.getSouthWest();
var northEast= bounds.getNorthEast();
var lngSpan= northEast.lng() - southWest.lng();
var latSpan= northEast.lat() - southWest.lat();
for (var i= 0; i< 10; i++) {
var point= new GLatLng(southWest.lat() + latSpan* Math.random(),
southWest.lng() + lngSpan* Math.random());
map.addOverlay(new GMarker(point));
}

查看示例 (marker-simple.html)

可拖动的标记

标记是能够点击和拖动到新位置的交互式对象。在此示例中，咱们将一个可拖动的标记放置在地图上，并监听它的几个较简单事件。可拖动标记经过实现如下四类事件来表示其拖动状态：click、dragstart、drag 和 dragend。默认状况下，标记可点击但不可拖动，因此它们须要经过将额外的标记选项 draggable 设置为 true 来初始化。可拖动标记拖动结束后默认有弹跳效果。若是不喜欢这种效果，请将 bouncy 选项设置为 false，标记会平缓放下。

查看示例 (marker-drag.html)

图标（标记）

标记能够用自定义的新图标来显示，以替代默认图标。由于地图 API 中一个图标（GIcon 对象）须要由多个不一样的图像组成，因此定义图标较为复杂。一个图标最少应定义前景图像、类型为 GSize 的尺寸和用于定位图标的图标偏移值。

最简单的自定义图标是基于 G_DEFAULT_ICON 类型来建立。基于此类型建立图标让您仅经过修改若干属性便可快速更改默认图标。

在下面的示例中，咱们先用 G_DEFAULT_ICON 类型建立一个图标，而后使用其余图像来改变默认图像。（使用不一样图像时要谨慎，由于它们须要设置为与默认图像相同的正确尺寸才能正常显示。）

var map= new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Create our "tiny" marker icon
var blueIcon= new GIcon(G_DEFAULT_ICON);
blueIcon.image= "http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";

// Set up our GMarkerOptions object
markerOptions= { icon:blueIcon};

// Add 10 markers to the map at random locations
var bounds= map.getBounds();
var southWest= bounds.getSouthWest();
var northEast= bounds.getNorthEast();
var lngSpan= northEast.lng() - southWest.lng();
var latSpan= northEast.lat() - southWest.lat();
for (var i= 0; i< 10; i++) {
var point= new GLatLng(southWest.lat() + latSpan* Math.random(),
southWest.lng() + lngSpan* Math.random());
map.addOverlay(new GMarker(point, markerOptions));
}

查看示例 (icon-simple.html)

多数图标包含前景图像和阴影图像。阴影图像应该和前景图像成 45 度夹角（向右上方倾斜），阴影图像的左下角应与图标前景图像的左下角对齐。阴影图像应是通过 Alpha 透明处理的 24 位 PNG 图像，以便图像边界能够在地图上正确显示。

如下示例使用 Google Ride Finder“迷你”标记为例，建立一种新类型的图标。咱们必须指定前景图像、阴影图像以及一些将图标锚定到地图、将信息窗口锚定到图标的点。请注意该图标的参数都是经过 GMarkerOptions 中的选项来指定的。

var map= new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Create our "tiny" marker icon
var tinyIcon= new GIcon();
tinyIcon.image= "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow= "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize= new GSize(12, 20);
tinyIcon.shadowSize= new GSize(22, 20);
tinyIcon.iconAnchor= new GPoint(6, 20);
tinyIcon.infoWindowAnchor= new GPoint(5, 1);

// Set up our GMarkerOptions object literal
markerOptions= { icon:tinyIcon};

// Add 10 markers to the map at random locations
var bounds= map.getBounds();
var southWest= bounds.getSouthWest();
var northEast= bounds.getNorthEast();
var lngSpan= northEast.lng() - southWest.lng();
var latSpan= northEast.lat() - southWest.lat();
for (var i= 0; i< 10; i++) {
var point= new GLatLng(southWest.lat() + latSpan* Math.random(),
southWest.lng() + lngSpan* Math.random());
map.addOverlay(new GMarker(point, markerOptions));
}

请注意 GMarkerOptions 对象的定义演示了“对象常量”表示法的用法。该对象不是使用构造函数实例化的，而只是使用名-值对进行声明。

查看示例 (icon-complex.html)

自定义图标

GIcon 对象也有若干其余属性，应对其进行适当设置，以便使您的图标获取最佳的浏览器兼容性和功能。例如，imageMap 属性指定图标图像不透明部分的形状。若是不在图标中设置此属性，则整个图标图像（包括透明部分）在 Firefox/Mozilla 中都将是可点击的。有关详细信息，请参阅 GIcon 类参考。

在许多状况下，图标能够有不一样的前景，但具备相同的形状和阴影。最简单的实现方式是使用 GIcon 类的构造函数“复制”已有的图标（好比 G_DEFAULT_ICON，将其做为 GIcon 的 copy 参数），它将复制该图标全部的默认属性，而后您能够对其进行自定义。

查看示例 (icon-custom.html)

使用标记管理器

向 Google 地图添加大量标记可能会下降显示地图的速度，还会使视觉效果过于混乱，对于某些缩放级别尤为如此。标记管理器实用工具提供了一个解决这些问题的方案，容许在同一个地图上高效显示数百个标记，并可以指定应显示标记的缩放级别。

GMaps 实用工具库中提供标记管理器实用工具。该库为开源，包含不属于核心 Google 地图 API 的工具。要添加该库中包含的工具，可使用 <script> 标签直接添加 JavaScript 源代码。

markermanager.js 库中的 MarkerManager 对象会用实用工具管理已注册的标记，记录当前视图的特定缩放级别中哪些标记可见，并仅将这些标记传递给地图以进行绘制，从而免除了管理重担。管理器监控地图的当前视图和缩放级别，动态地从地图中添加或删除有效标记。此外，开发人员能够经过容许标记指定显示自身的缩放级别来实现标记集群。此类管理能够大大加快地图的显示并减小视觉混乱。

要使用标记管理器，请建立一个 MarkerManager 对象。在最简单的状况下，只需向其传递地图便可。

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

还能够指定大量选项来微调标记管理器的性能。这些选项经过 MarkerManagerOptions 对象传递，该对象包含如下属性：

· maxZoom：指定受此标记管理器所监控的最高缩放级别。默认值是 Google 地图支持的最高缩放级别。

· borderPadding：指定当前视口外受管理器监控的其余填充区域（以像素为单位）。这容许视线外的标记在地图上预加载，提升了地图小范围平移的性能。默认值是 100。

· trackMarkers：指定标记管理器是否应跟踪标记的移动。若是要管理经过 setPoint() 方法更改位置的标记，请将此值设置为 true。默认状况下，此标记设置为 false。请注意，若是在此值设置为 false 的状况下移动标记，标记将同时在原始位置和新位置显示。

MarkerManagerOptions 对象是对象常量，因此只需声明该对象而无需构造函数：

var map= new GMap2(document.getElementById("map_canvas"));
var mgrOptions= { borderPadding: 50, maxZoom: 15, trackMarkers: true };
var mgr= new MarkerManager(map, mgrOptions);

建立管理器后，您可能想向其中添加标记。MarkerManager 支持使用 addMarker() 方法一次添加一个标记，或者使用 addMarkers() 方法添加由多个标记组成的数组。若是使用 addMarker() 添加的单个标记位于当前视图并在指定的缩放级别限制内，则它们会在地图上当即显示。

建议使用 addMarkers() 集中添加标记，由于这样更高效。只有显式地调用 MarkerManager 的 refresh() 方法，使用 addMarkers() 方法添加的标记才会显示在地图上，这会将当前视口和边界填充区域内的全部标记添加到地图中。首次显示后，MarkerManager 能够经过监控地图的“moveend”事件来监控全部可见的更新。

缩放级别示例：天气地图

如下示例建立欧洲的模拟天气地图。在缩放级别 3 时，显示 20 个随机分布的天气图标。在级别 6 时，能够轻松地辨别出全部 200 我的口超过 30 万的城市，并显示额外 200 个标记。最后，在级别 8 时，会显示 1000 个标记。（注意：为了简化示例，标记将添加在随机位置。）

查看示例 (weather_map.html)

集群示例：Google 办事处

标记管理器也能够执行简单的标记集群。虽然不是自动执行此操做，但您能够经过设置显示指定标记的最大缩放级别和最小缩放级别来实现所需效果。在此示例中，咱们建立 Google 在北美的办事处地图。在最高的级别，咱们在办事处所处国家或地区显示标记。对于缩放级别 3 到 7，咱们在一个或多个办事处所处人口中心显示图标。最后，在级别 8 或更高级别，咱们为每一个办事处显示一个标记。

查看示例 (google_northamerica_offices.html)

有关详细信息，请参阅开源标记管理器的参考文档。

折线

GPolyline 对象可在地图上建立线性叠加层。GPolyline 包括一系列点，并建立一系列有序链接这些点的线段。

绘制折线

折线在地图上绘制为一系列直线段。能够自定义这些线段的颜色、粗细和透明度。颜色应是十六进制数字 HTML 样式，例如使用 #ff0000 而非 red。GPolyline 没法识别命名颜色。

GPolyline 对象使用浏览器的矢量绘制功能（若是可用）。在 Internet Explorer 中，Google 地图使用 VML（请参阅 XHTML 和 VML）绘制折线；在其余浏览器中使用 SVG（若是可用）。在全部其余环境中，咱们从 Google 服务器请求一个线段图像并将该图像叠加到地图上，当地图缩放和拖动时按须要刷新图像。

如下代码段会在两点之间建立 10 像素宽的红色折线：

var polyline= new GPolyline([
new GLatLng(39.9493, 116.3975),
new GLatLng(39.9593, 116.4071)
], "#ff0000", 10);
map.addOverlay(polyline);

查看示例 (polyline-simple.html)

测地折线

在地图上表示的折线是符合当前投影的直线。即它们在地图上显示为直的，但实际上可能没有正确考虑到地球的弧度。若是想绘制测地线（“大圆球”的一段，表示地球表面上两点之间的最短距离），则须要经过 GPolyline 的 GPolylineOptions 参数传递 geodesic:true。

GPolylineOptions 对象是一个对象常量的示例。若是使用对象常量，则无需构造对象。而是能够将参数做为一系列名/值对在花括号中传递。对象常量常常用于不须要实例化对象的状况。

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37, 107), 2);

// Create GPolylineOptions argument as an object literal.
// Note that we don't use a constructor.

var polyOptions= {geodesic:true};
var polyline= new GPolyline([
new GLatLng(50, 120),
new GLatLng(30, 100)
], "#ff0000", 10, 1, polyOptions);
map.addOverlay(polyline);

查看示例 (polyline-geodesic.html)

编码折线

Google 地图中的 GPolyline 对象将直线表示为一系列点，使其易于使用但不必定紧凑。长线和复杂的线须要大量内存，绘制起来也须要更长时间。同时，在地图上绘制非编码折线中的线段时，不会考虑较大缩放级别时的分辨率。

Google 地图 API 可以让您使用编码折线表示路径，编码折线使用 ASCII 字符的压缩格式在 GPolyline 中指定一系列点。编码折线还可以让您指定绘制线段时应忽略的缩放级别组，这样您就能够指定一条折线在指定缩放级别的详细程度。尽管编码折线设置起来更困难，但它们可以使您更高效地绘制叠加层。

例如，3 个点的 GPolyline（两条线段）一般表示为：

var polyline= new GPolyline([
   new GLatLng(39.9493, 116.3975),
   new GLatLng(39.9593, 116.4071),
   new GLatLng( 37.4619, -122.1819)
], "#FF0000", 10);
map.addOverlay(polyline);

这些点的编码 GPolyline 以下所示（眼下先不考虑编码算法的特殊要求）。

var encodedPolyline= new GPolyline.fromEncoded({
    color: "#FF0000",
    weight: 10,
    points: "yzocFzynhVq}@n}@o}@nzD",
    levels: "BBB",
    zoomFactor: 32,
    numLevels: 4
});
map.addOverlay(encodedPolyline);

关于此代码要注意两点。

9 第一，各系列点在编码折线中表示为一系列 ASCII 字符，而在基本 GPolyline 中却使用常见的经度和纬度。将这些点建立为一系列编码 ASCII 值的算法位于此处。若是要经过服务器进程动态计算编码折线（举例而言），则须要此算法。可是，若是只想要转换现有点指定的经度和纬度，则可使用咱们的交互实用工具。

10 第二，编码折线还容许您指定每一个线段在 Google 地图上绘制自身的最大缩放级别。若是在较高的缩放级别上未显示某个点，则只绘制先前可显示的点到下一个可显示的点之间的路径。请注意，此特性在非编码 GPolyline 中不可用，它在如下状况下特别有用：容许在高缩放级别（某些线段的细节可能不相关）下快速绘制。例如，当地图缩小到州级别时，表示从纽约到芝加哥行车路线的编码折线应不关心表示曼哈顿特定街道的线段。

查看示例 (polyline-encoding.html)

交互编码折线实用工具

请参阅折线算法以了解有关底层编码折线算法的信息。

多边形

GPolygon 对象相似于 GPolyline 对象，由于它们都包括一系列有序的点。可是，多边形不像折线同样有两个端点，而是设计为定义造成闭环的区域。和折线同样，您能够自定义多边形边（线）的颜色、粗细和透明度，以及封闭的填充区域的颜色和透明度。颜色应是十六进制数字 HTML 样式。

GPolygon 对象相似于 GPolyline对象，使用浏览器的矢量绘制功能（若是可用）。

下面的代码段用四个点建立一个 10 像素宽的方框。请注意，此多边形是“封闭的”，即线段路径的终点与始点重合；始终应闭合多边形以免发生未定义的行为。

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
map.addControl(new GSmallMapControl());
GEvent.addListener(map, 'click', function(overlay, latlng) {
var lat= latlng.lat();
var lon= latlng.lng();
var latOffset= 0.01;
var lonOffset= 0.01;
var polygon= new GPolygon([
   new GLatLng(lat, lon- lonOffset),
   new GLatLng(lat+ latOffset, lon),
   new GLatLng(lat, lon+ lonOffset),
   new GLatLng(lat- latOffset, lon),
   new GLatLng(lat, lon- lonOffset)
], "#f33f00", 5, 1, "#ff0000", 0.2);
map.addOverlay(polygon);
});

查看示例 (polygon-simple.html)

底面叠加层

多边形是很是有用的叠加层，可表示任意大小的区域，但不能显示图像。若是您有一个要放置在地图上的图像，可使用 GGroundOverlay 对象。 GGroundOverlay 的构造函数将图像的网址和图像的 GLatLngBounds 做为参数。

下面的示例将美国新泽西州纽华克的旧地图做为叠加层放在地图上：

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(36.0, 113), 12);
// ground overlay

var boundaries= new GLatLngBounds(new GLatLng(35.5, 112), new GLatLng(36.5, 114));
var oldmap= new GGroundOverlay("http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", boundaries);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(oldmap);

查看示例 (groundoverlay-simple.html)

图块叠加层

Google 地图 API 中的地图在每一个缩放级别都包含一组图块，涵盖地球的整个表面。每种地图类型使用的图块有：G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP 和 G_PHYSICAL_MAP。图块不必定在全部缩放级别中都涵盖全部区域。例如，太平洋的许多区域在高缩放级别中不显示。

在最低的缩放级别（级别 0），一个图块表示整个地球：

每一个后继的缩放级别将地图分红 4 N 个图块，其中“N”表明缩放级别。例如，在缩放级别 1，Google 地图将世界分为 2x2 网格，共 4 个图块；在缩放级别 2，Google 地图将世界分为 4x4 网格，共 16 个图块，以此类推。

若是要修改这些图块的显示，您有两种选择：

· 使用 GTileLayerOverlay 在现有的地图类型上实现您本身的图块叠加层

· 使用 GMapType 实现您本身的自定义地图类型

第一种状况简单得多，但使用较受限制，而第二种状况可以让您在应用中对显示进行更多控制。下面讨论了这两种状况，可是本文档中未讲述怎样彻底实现自定义地图类型。

每一种状况都须要从 GTileOverlay 接口实现三种抽象方法：

· getTileUrl() 会向地图返回包含图块的网址（传递 GPoint 和缩放级别的状况下）。

· isPng() 会向地图返回 Boolean，表示图像是否为 PNG 文件（PNG 文件能够透明地显示）。若是为 true，则假定该图像为 PNG。

· getOpacity() 返回 0.0 和 1.0 之间的值，表示显示此图像的透明度级别。

咱们将在接下来的两部分中讨论这些不一样的方法。

图块层叠加层

若是要在现有地图类型上显示叠加层，请使用 GTileLayerOverlay 对象。此对象要求您建立 GCopyrightCollection，并将其与图块层相关联，以表示容许使用该图像（或这些图像）。

如下代码在每一个图块的全部缩放级别上显示一个简单的透明叠加层，使用浮动十字光标表示图块的轮廓。

// Set up the copyright information
// Each image used should indicate its copyright permissions
var myCopyright= new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,'©2007 Google'));

// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer= new GTileLayer(myCopyright);
tilelayer.getTileUrl= function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng= function() { return true;};
tilelayer.getOpacity= function() { return 1.0; }

var myTileLayer= new GTileLayerOverlay(tilelayer);
var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
map.addOverlay(myTileLayer);

查看示例 (tileoverlay-simple.html)

自定义地图类型

注意：这是一个高级主题

若是以为 GTileLayerOverlay 太受限制，则您能够定义本身的自定义地图类型，并开发全新的显示样式。要执行此操做，请构造一个 GMapType 对象，并使用 GMap2.addMapType() 方法将其添加到地图。

从头构造地图类型是一个复杂的过程。您须要构建一种方式，在提供当前图标的状况下，定义和检索在地图上显示的动态数据，并须要肯定怎样引用和显示图块。您怎么作由您本身决定，但咱们能够经过说明 Google 地图怎样实现其图块引用来向您提供一些帮助。

Google 地图坐标

Google 地图 API 使用三种坐标系：

· 像素坐标，引用图块上的一个点

· 图块坐标，引用图块层中的一个图块

· 缩放层，定义总的图块数

下面对其中每一个系统进行讨论。

像素坐标

Google 地图中的每一个图块都包含 256 x 256 个像素。可使用 GPoint(x,y) 对来引用特定图块上的某个点。每一个图块的原点 (0,0) 表示为图块的西北角。所以，对于表示整个地球的单个图块，原点设置为在北极，经度 -180 度，您能够在该位置看到阿拉斯加。x（经度）值越往东越大，而 y（纬度）值越往南越大，一直到东南角 (255,255)。

在高一级的缩放级别，像素空间在 x 和 y 方向都扩大一倍。例如，在缩放级别 1，地图包括 4 个 256x256 像素的图块，产生 512x512 的像素空间。在缩放级别 19，地图上的每一个 x 和 y 像素都可以使用 0 和·256 * 219 之间的值来引用。

图块坐标

引用整个地图上这样一个惟一的点一般是不实际的。在较高的缩放级别，Google 地图 API 不能使用一个图像文件显示整个地球。所以肯定正在使用哪一个图块，而后相对于该图块的原点计算像素坐标很是有用。您实现的任何自定义地图都须要进行相同的计算。

Google 地图中的图块从与像素相同的原点开始计算，以便使原点图块始终处于地图的西北角。图块使用从该原点算起的 x,y 坐标进行索引。例如，在缩放级别 2，当地球分为 16 个图块时，每一个图块能够经过一个惟一的 x,y 对来引用：

所以索引特殊缩放级别的特殊点可使用两个 GPoint 值：一个引用正在使用的图块，一个引用图块 256 x 256 像素图像中的坐标。

若是不是少量简单缩放级别，则实现图块叠加层是一个麻烦的任务，由于您须要添加逻辑来肯定处理哪一个特定的图块。Google 地图·API 可以让您构建一个 GTileLayer，将 GTileLayerOptions 参数做为对象常量传递。GTileLayerOptions 参数包含 tileUrlTemplate 属性，可根据图块坐标将图块请求映射到网址。叠加层的构造函数可能以下所示：

var tileLayerOverlay= new GTileLayerOverlay(
new GTileLayer(null, null, null, {
    tileUrlTemplate: 'http://domain.com/myimage_{Z}_{X}_{Y}.png',
    isPng:true,
    opacity:1.0
})
);

map.addOverlay(tlo);

此模板方案可以让您像处理 Google 地图同样处理使用图块坐标命名的一组图块。

处理版权信息

地图一般包含从一些外部机构购买、生成或许可的图像。这些图像一般须要显示版权信息，在某些状况下（例如卫星数据），地图上不一样位置的图像可能来自不一样的来源。为了在自定义地图类型上显示动态版权信息，地图 API 提供了大量对象来存放版权信息，并提供了基于当前视口和缩放级别对此版权信息实现检索的方法和接口。

版权对象

GCopyright 对象是一个用于存放基础版权信息的简单对象。此对象的 minZoom 和 bounds 属性定义此版权信息有效的限制条件，包含版权字符串的 text 将在这些条件下显示。

GTileLayer 接口的构造函数须要 copyrights 参数。处理这些图块层的类（例如 GTileLayerOverlay 和 GMapType）须要预先建立 GCopyrightCollection 对象，并将该对象传递给图块层的构造函数。

Google 地图 API 使用如下方法来显示版权信息的，您能够覆盖这些方法来提供自定义行为：

· GMapType.getCopyrights() 在其全部子图块层上调用 GTileLayer.getCopyright()。

· 每一个 GTileLayer.getCopyright() 都在其版权集合上调用 GCopyrightCollection.getCopyrightNotice()。

其中每一个方法都包含 bounds 和 zoom 参数，能够覆盖它们并肯定要显示哪些版权信息。

默认状况下，只要 Google 地图 API 显示某个地图类型中的图块层，它就会经过 GTileLayer.getCopyright() 方法检索当前正在使用的版权。某些地图类型可能包含多个图块层，这可能意味着须要并发显示多个 GCopyrightCollection 对象中的信息。（例如，G_HYBRID_MAP 地图类型同时实现卫星地图层和普通地图层。）这种并发信息经过结合多个版权集合中的版权声明来显示。

转换投影坐标

地球是一个球形，而地图是平面的二维对象。您在 Google 地图 API 中看到的地图是这个球形在平面上的“投影”。Google 地图 API 中的投影使用 GProjection 接口实现。Google 地图 API 中当前仅使用 GMercatorProjection 这一个投影。用最简单的方式来讲，投影能够定义为 GLatLng 值与地图上的坐标之间的一对一对应，GProjection 接口提供了用于此用途的转换实用工具。

GProjection.fromLatLngToPixel() 方法可将 GLatLng 值转换为指定缩放级别的像素坐标。相似地，GProjection.fromPixelToLatLng() 方法可将指定缩放级别的像素坐标转换为 GLatLng 值。当实现地图类型时这些方法很是有用，由于它们可以让您肯定显示哪些图块、怎样显示它们以及显示它们时所使用的偏移值。

如下示例经过计算当前缩放级别的像素坐标而处理点击事件，并同时返回该位置的像素坐标和图块坐标：

查看示例 (tile-detector.html)

有关实现地图类型的详细信息，请查阅 GMapType 参考。

层

GLayer 对象是叠加层对象，存储第三方地理信息集合。“层”是地理相关功能的集合，可共享某些经常使用函数，在地图上显示为一个组。Google 经过从其余源获取的数据提供这些集合，并将它们包含在一个层内。

层一般包含多种项目，一般有标记、折线和多边形，可是这些项目不被视为单独对象。层自身（及其全部组件）被视为地图 API 的一个叠加层，经过标准 addOverlay() 方法添加到地图。层还能够进行交互，例如，可对组件执行操做以调出信息窗口。

每一个层均包含惟一的命名空间 ID，以即可以轻松地引用、惟一地定位它们。命名空间 ID 当前基于源层的域。例如，英文的“Geotagged Wikipedia © Articles”层的命名空间 ID 为“org.wikipedia.en”。

Google 地图 API 当前能够访问这些公共层。会按期将新的层添加到地图 API。咱们会维护此电子表格中的这个列表。

如下代码段会将英文的“Wikipedia”层添加到纽约城格林威治村：

function initialize() {
if (GBrowserIsCompatible()) {
   var map= new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(39.90822, 116.4055), 13);
   var myLayer= new GLayer("org.wikipedia.en");
    map.addOverlay(myLayer);
}
}

查看示例 (layer-simple.html)

自定义叠加层

Google 地图 API 还可以让您经过实现 GOverlay 接口而建立自定义叠加层。经过实现 GOverlay 接口，Google 地图 API 提供了若干服务，例如 GTrafficOverlay、GGeoXml 和 GStreetviewPanorama 对象。（这些服务在服务部分讲述。）

GOverlay 接口须要您实现四种抽象方法：

· initialize()，用于响应 GMap2.addOverlay()

· remove()，用于响应 GMap2.removeOverlay()

· copy()，容许复制新建的叠加层

· redraw()，用于响应地图中的显示更改

Google 地图 API 接口的实现方式是在 JavaScript 中将 prototype 属性赋值为继承对象的一个实例。例如，Rectangle 对象可以使用如下代码从 GOverlay 接口继承：

OverlaySubclass.prototype= new GOverlay();

经过为对象的 prototype 上的抽象方法赋值，能够轻松地实现 GOverlay 接口中的这些抽象方法：

OverlaySubclass.prototype.initialize= myInitializeMethod;
OverlaySubclass.prototype.remove= myRemoveMethod;
OverlaySubclass.prototype.copy= myCopyMethod;
OverlaySubclass.prototype.redraw= myRedrawMethod;

在如下示例中，咱们建立了一个 Rectangle 叠加层，在地图上勾勒出一个地理区域。Rectangle 类定义 GOverlay 接口的四个必需方法。特别请记下 initialize() 方法（建立表示叠加层的 DOM 元素）和 redraw() 方法（基于当前投影和缩放级别在地图上定位叠加层并调整叠加层大小）。

组成叠加层的每一个 DOM 元素都位于一个“地图窗格”上，地图窗格定义绘制的 Z 轴次序。例如，折线对于地图来讲是平面，因此在最低的 G_MAP_MAP_PANE 中绘制。标记将其阴影元素放置在 G_MAP_MARKER_SHADOW_PANE 中，将前景元素放置在 G_MAP_MARKER_PANE 中。将叠加层元素放置在正确的窗格中能够确保地图上的折线在标记阴影下方绘制，信息窗口在其余叠加层上方绘制。在此示例中，咱们的叠加层相对于地图是平面，因此咱们将其和 GPolyline 同样添加到最低绘制顺序窗格 G_MAP_MAP_PANE。请参阅类参考以查看地图窗格的完整列表。

// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
this.bounds_= bounds;
this.weight_= opt_weight|| 2;
this.color_= opt_color|| "#888888";
}
Rectangle.prototype= new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize= function(map) {
// Create the DIV representing our rectangle
var div= document.createElement("div");
div.style.border= this.weight_+ "px solid " + this.color_;
div.style.position= "absolute";

// Our rectangle is flat against the map, so we add our selves to the
// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
// below the marker shadows)
map.getPane(G_MAP_MAP_PANE).appendChild(div);

this.map_= map;
this.div_= div;
}

// Remove the main DIV from the map pane
Rectangle.prototype.remove= function() {
this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new Rectangle
Rectangle.prototype.copy= function() {
return new Rectangle(this.bounds_, this.weight_, this.color_,
                       this.backgroundColor_, this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw= function(force) {
// We only need to redraw if the coordinate system has changed
if (!force) return;

// Calculate the DIV coordinates of two opposite corners of our bounds to
// get the size and position of our rectangle
var c1= this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var c2= this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

// Now position our DIV based on the DIV coordinates of our bounds
this.div_.style.width= Math.abs(c2.x- c1.x) + "px";
this.div_.style.height= Math.abs(c2.y- c1.y) + "px";
this.div_.style.left= (Math.min(c2.x, c1.x) - this.weight_) + "px";
this.div_.style.top= (Math.min(c2.y, c1.y) - this.weight_) + "px";
}

var map= new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Display a rectangle in the center of the map at about a quarter of
// the size of the main map
var bounds= map.getBounds();
var southWest= bounds.getSouthWest();
var northEast= bounds.getNorthEast();
var lngDelta= (northEast.lng() - southWest.lng()) / 4;
var latDelta= (northEast.lat() - southWest.lat()) / 4;
var rectBounds= new GLatLngBounds(
   new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
   new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
map.addOverlay(new Rectangle(rectBounds));

查看示例 (overlay-custom.html)

服务

1 服务概述

2 XML 和数据解析

3 地址解析

4 GStreetviewPanorama 对象

5 与 Google 地球集成

6 本地搜索

7 KML 和 GeoRSS 叠加层

8 交通叠加层

9 Directions

服务概述

Google 地图 API 会按期扩展，添加新的功能和特性，一般这些功能和特性会先在 ditu.google.cn 上发布。本部分讲述这些服务。注意：因为“服务”的定义在某种程度上较难懂，所以本部分会涉及的内容也较广。咱们基本上将没法放到其余部分的内容都放到了本部分中。

XML 和数据解析

Google 地图 API 导出一种工厂方法，用于建立适用于各类浏览器的 XmlHttpRequest() 对象（在 Internet Explorer、Firefox 和 Safari 的最新版本中都可使用）。和全部的 XmlHttpRequest 同样，任何检索的文件都必须在本地域中。如下示例下载名为 myfile.txt 的文件，并使用 JavaScript alert() 显示其内容：

var request= GXmlHttp.create();
request.open("GET", "myfile.txt", true);
request.onreadystatechange= function() {
if (request.readyState== 4) {
alert(request.responseText);
}
}
request.send(null);

该 API 还为典型的 HTTP GET 请求导出一种更简单的 GDownloadUrl() 方法，无需检查 XmlHttpRequest() readyState。上面的示例能够以下使用 GDownloadUrl() 从新编写：

GDownloadUrl("myfile.txt", function(data, responseCode) {
alert(data);
});

可使用静态方法 GXml.parse() 解析 XML 文档，该方法取 XML 的一个字符串做为其惟一的参数。此方法与多数流行的浏览器兼容，但若是浏览器自己不支持 XML 解析，它会抛出异常。

在此示例中，咱们使用 "data.xml"GDownloadUrl 方法下载一个静态文件 ()，它包含一个 XML 格式的经纬坐标列表。当下载完成后，咱们使用 GXml 解析该 XML，并在 XML 文档中的每一个点处建立一个标记符。

var map= new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
//   <marker lat="39.945" lng="116.375"/>
//   <marker lat="39.872" lng="116.423"/>
// </markers>
GDownloadUrl("data.xml", function(data, responseCode) {
var xml= GXml.parse(data);
var markers= xml.documentElement.getElementsByTagName("marker");
for (var i= 0; i< markers.length; i++) {
   var point= new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    map.addOverlay(new GMarker(point));
}
});

查看示例 (xhr-requests.html)。此示例使用外部 XML 数据文件 data.xml。

有关详细信息，请参见 GXmlHttp 和 GXml 类参考。

地址解析

地址解析是将地址（如“1600 Amphitheatre Parkway, Mountain View, CA”）转换为地理坐标（如经度 -122.083739 和纬度 37.423021）的过程，能够用于放置标记符或定位地图。Google 地图 API 包含地址解析服务，能够经过 HTTP 请求直接访问，也能够经过使用 GClientGeocoder 对象来访问。

请注意，地址解析是一种时间和资源密集型任务。尽可能为您的地址预先进行地址解析（使用 HTTP 地址解析器或其它地址解析服务），并使用地址解析缓存存储您的结果。

地址解析对象

能够经过 GClientGeocoder 对象访问 Google 地图 API 地址解析服务。使用 GClientGeocoder.getLatLng() 将字符串地址转换为 GLatLng。此方法采用要转换的字符串地址以及在检索到地址后要执行的回调函数做为参数。该回调函数是必要的，由于地址解析涉及向 Google 的服务器发送请求，可能须要一些时间。

在此示例中，咱们将对一个地址进行地址解析，在该点添加标记，并打开一个显示该地址的信息窗口。请注意，该回调函数做为函数显式声明传递。

查看示例 (geocoding-simple.html)

还能够经过 GLatLngBounds 方法修改地图 API 地址解析器以指定解析结果在指定的视口内（视口是一个 GClientGeocoder.setViewport() 类型的矩形区域)。您可使用 GClientGeocoder.setBaseCountryCode() 方法返回为特定地区（国家）定制的结果。能够对 Google 地图主应用程序提供地址解析的每一个主要地区发送地址解析请求。例如，搜索“Toledo”将返回西班牙地区内（http://maps.google.es）由国家或地区代码“es”指定的不一样结果，而不是默认的美国 (http://maps.google.com) 地区内的结果。

抽取结构化地址

若是要访问有关某个地址的结构化信息，GClientGeocoder 还提供了 getLocations() 方法，该方法返回包括如下信息的 JSON 对象：

· Status

o request - 请求类型。在本例中，始终是 geocode。

o code - 响应代码，相似于 HTTP 状态代码，指示地址解析请求是否成功。请参见状态代码完整列表。

· Placemark - 若是地址解析器发现多个匹配项，则可能返回多个地标。

o address - 格式化良好，大小写正确的地址版本。

o AddressDetails - 格式化为 xAL（或可扩展地址语言，一种地址格式化的国际标准）的地址。

§ Accuracy - 表示指定地址的地址解析所能达到的精确度的属性。请参见可能值列表。

o Point - 三维空间中的点。

§ coordinates - 地址的经度、纬度和海拔。在本例中，海拔始终设置为 0。

下面咱们展现使用地址解析器解析 Google 总部地址返回的 JSON 对象：

{
"name": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
"Status": {
   "code": 200,
   "request": "geocode"
},
"Placemark": [
   {
     "address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
     "AddressDetails": {
       "Country": {
         "CountryNameCode": "US",
         "AdministrativeArea": {
           "AdministrativeAreaName": "CA",
           "SubAdministrativeArea": {
             "SubAdministrativeAreaName": "Santa Clara",
             "Locality": {
               "LocalityName": "Mountain View",
               "Thoroughfare": {
                 "ThoroughfareName": "1600 Amphitheatre Pkwy"
               },
               "PostalCode": {
                 "PostalCodeNumber": "94043"
               }
             }
           }
         }
       },
       "Accuracy": 8
     },
     "Point": {
       "coordinates": [-122.083739, 37.423021, 0]
     }
   }
]
}

在此示例中，咱们使用 getLocations() 方法对地址进行地址解析，从 JSON 抽取地址的良好格式化版本和两字母的国家或地区代码，并在信息窗口中显示。

var map;
var geocoder;

function addAddressToMap(response) {
map.clearOverlays();
if (!response|| response.Status.code!= 200) {
    alert("\"" + address+ "\" not found");
} else {
    place= response.Placemark[0];
    point= new GLatLng(place.Point.coordinates[1],
                        place.Point.coordinates[0]);
    marker= new GMarker(point);
    map.addOverlay(marker);
    marker.openInfoWindowHtml(place.address+ '<br>' +
     '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}

查看示例 (geocoding-extraction.html)

反向地址解析

术语“地址解析”一般是指将用户可阅读的地址转换成地图上的点。将地图上的点反向转换成用户可阅读的地址的过程称为“反向地址解析”。

GClientGeocoder.getLocations() 方法支持标准地址解析和反向地址解析。若是为此方法传递了一个 GLatLng 对象而不是 String 地址，地址解析器将执行反向查询并返回最接近的可寻址位置的结构化 JSON 对象。请注意，若是提供的 GLatLng 与任何可寻址位置都不彻底匹配，那么，最接近的可寻址位置与查询的原始经度值和纬度值之间可能存在一段距离。

注意：反向地址解析不属于精密科学。地址解析器会试图在必定的误差范围内查找最接近的可寻址位置；若是找不到匹配项，地址解析器一般会返回 G_GEO_UNKNOWN_ADDRESS (602) 状态代码。

var map;
var geocoder;
var address;

function initialize() {
map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.90822, 116.4055), 13);
map.addControl(new GLargeMapControl);
GEvent.addListener(map, "click", getAddress);
geocoder= new GClientGeocoder();
}

function getAddress(overlay, latlng) {
if (latlng!= null) {
    address= latlng;
    geocoder.getLocations(latlng, showAddress);
}
}

function showAddress(response) {
map.clearOverlays();
if (!response|| response.Status.code!= 200) {
    alert("Status Code:" + response.Status.code);
} else {
    place= response.Placemark[0];
    point= new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
    marker= new GMarker(point);
    map.addOverlay(marker);
    marker.openInfoWindowHtml(
       '<b>orig latlng:</b>' + response.name+ '<br/>' +
       '<b>latlng:</b>' + place.Point.coordinates[0] + "," + place.Point.coordinates[1] + '<br>' +
       '<b>Status Code:</b>' + response.Status.code+ '<br>' +
       '<b>Status Request:</b>' + response.Status.request+ '<br>' +
       '<b>Address:</b>' + place.address+ '<br>' +
       '<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +
       '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}

查看示例 (geocoding-reverse.html)

地址解析缓存

GClientGeocoder 默认配备有客户端缓存。该缓存存储地址解析器响应，当从新对地址进行地址解析时能够加快响应。能够经过执行 GClientGeocoder 对象的 setCache() 方法并传递一个 null 参数来关闭缓存。但咱们建议保留缓存，由于它能够提升性能。要更改 GClientGeocoder 使用的缓存，请调用 setCache() 方法并传递一个新缓存做为参数。要清空当前缓存的内容，请对地址解析器或直接对缓存调用 reset() 方法。

咱们鼓励开发人员构建本身的客户端缓存。在此示例中，咱们构造了一个缓存，包含对地址解析 API 所涵盖的国家或地区中的六个首都或首府城市的预先计算的地址解析器响应。首先，咱们构建了一个地址解析响应数组。而后，咱们建立了扩展标准 GeocodeCache 的自定义缓存。定义该缓存后，咱们调用 setCache() 方法。对缓存中存储的对象没有严格检查，因此您也能够在缓存中存储其它信息（例如人口规模）。

// Builds an array of geocode responses for the 6 capitals
var city= [
{
    name: "Washington, DC",
   Status: {
      code: 200,
      request: "geocode"
   },
   Placemark: [
     {
        address: "Washington, DC, USA",
        population: "0.563M",
       AddressDetails: {
         Country: {
          CountryNameCode: "US",
           AdministrativeArea: {
             AdministrativeAreaName: "DC",
             Locality: {
               LocalityName: "Washington"
             }
           }
         },
         Accuracy: 4
       },
       Point: {
          coordinates: [-77.036667, 38.895000, 0]
       }
     }
   ]
},
... // etc., and so on for other cities
];

var map;
var geocoder;

// CapitalCitiesCache is a custom cache that extends the standard GeocodeCache.
// We call apply(this) to invoke the parent's class constructor.
function CapitalCitiesCache() {
   GGeocodeCache.apply(this);
}

// Assigns an instance of the parent class as a prototype of the
// child class, to make sure that all methods defined on the parent
// class can be directly invoked on the child class.
CapitalCitiesCache.prototype= new GGeocodeCache();

// Override the reset method to populate the empty cache with
// information from our array of geocode responses for capitals.
CapitalCitiesCache.prototype.reset= function() {
   GGeocodeCache.prototype.reset.call(this);
   for (var iin city) {
     this.put(city[i].name, city[i]);
   }
}

map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.441944, -122.141944), 6);

// Here we set the cache to use the UsCitiesCache custom cache.
geocoder= new GClientGeocoder();
geocoder.setCache(new CapitalCitiesCache());

查看示例 (geocoding-cache.html)

经过 HTTP 进行地址解析

还可使用服务器端脚原本直接访问地图 API 地址解析器。使用客户端地址解析器时不建议使用这种方法，但该方法在进行调试时或 JavaScript GClientGeocoder 对象不可用时却颇有用。

要访问地图 API 地址解析器，请访问 http://ditu.google.cn/maps/geo? 并在网址中添加如下参数：

· q（必填）- 您要进行地址解析的地址。

· key（必填）- 您的 API 密钥。

· sensor（必填）- 指示地址解析请求是否来自装有位置传感器的设备。该值必须为 true 或 false。

· output（必填）- 生成时输出应采用的格式。选项有 xml、kml、csv 或默认选项 json。

· ll（可选）- 视口中心的 {经度,纬度}，表示为以逗号分隔的字符串（例如“ll=-117.773438,40.479581”）。仅当将 spn 参数也传递给地址解析器时此参数才有意义。

· spn（可选）- 视口的“范围”，表示为以逗号分隔的 {经度,纬度} 字符串（例如“spn=22.5,11.1873”）。仅当将 ll 参数也传递给地址解析器时此参数才有意义。

· gl（可选）- 国家/地区代码，指定为 ccTLD（“顶级域”）双字符值。

注意：gl 和 spn,ll 视口参数只会影响地址解析器的结果，而不会彻底限制其结果。

在如下示例中，咱们请求 Google 总部的地理坐标：

http://ditu.google.cn/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=xml&sensor=true_or_false&key=abcdefg

本例中，咱们将 sensor 参数用做变量“true_or_false”，用以强调您必须将该值显示设置为 true 或 false。

若是指定 json 做为输出，则响应会格式化为 JSON 对象。若是指定 xml 或 kml，则响应以 KML 格式返回。XML 和 KML 输出彻底相同（对于 MIME 类型除外）。

例如，下面是地址解析器对“1600 amphitheatre mountain view ca”返回的响应。

<kml xmlns="http://earth.google.com/kml/2.0">
<Response>
   <name>1600 amphitheatre mountain view ca</name>
   <Status>
     <code>200</code>
     <request>geocode</request>
   </Status>
   <Placemark>
     <address>
        1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA
     </address>
     <AddressDetails Accuracy="8">
       <Country>
         <CountryNameCode>US</CountryNameCode>
         <AdministrativeArea>
           <AdministrativeAreaName>CA</AdministrativeAreaName>
           <SubAdministrativeArea>
             <SubAdministrativeAreaName>Santa Clara</SubAdministrativeAreaName>
             <Locality>
               <LocalityName>Mountain View</LocalityName>
               <Thoroughfare>
                 <ThoroughfareName>1600 Amphitheatre Pkwy</ThoroughfareName>
               </Thoroughfare>
               <PostalCode>
                 <PostalCodeNumber>94043</PostalCodeNumber>
               </PostalCode>
             </Locality>
           </SubAdministrativeArea>
         </AdministrativeArea>
       </Country>
     </AddressDetails>
     <Point>
       <coordinates>-122.083739,37.423021,0</coordinates>
     </Point>
   </Placemark>
</Response>
</kml>

若是想要获得易于解析的较短响应，而且不须要特殊的特性（如多个结果或良好的格式），咱们还提供一种 csv 输出。以 csv 格式返回的大幅包括四个数字，之间使用逗号分隔：

10 HTTP 状态代码

11 精确度（请参见精确度常数）

12 纬度

13 经度

如下示例按照准确性从低到高的顺序显示了对三个地址的回复：“State St, Troy, NY”、“2nd st & State St, Troy, NY”和“7 State St, Troy, NY”

200,6,42.730070,-73.690570
200,7,42.730210,-73.691800
200,8,42.730287,-73.692511

使用“街道视图”对象

使用“街道视图全景”对象须要客户端浏览器支持 Flash 插件。

小至指定道路，大至 Google 地图覆盖的整个区域，Google 街道视图均提供 360 度的全景视图。下面显示了一张示例街道视图图像。

Google 街道视图使用大部分浏览器支持的 Flash® 插件显示这些交互图像。如今，Google 地图 API 提供街道视图服务，可用于获取及处理在 Google 地图街道视图中使用的图像！

GStreetviewPanorama 对象

经过使用 GStreetviewPanorama 对象可支持街道视图图像，该对象可向街道视图 Flash® 查看器提供一个 API 接口。要将街道视图合并到地图 API 应用程序中，您须要遵循如下简单步骤：

14 建立一个容器（一般是 <div> 元素），来包含街道视图 Flash® 查看器。

15 建立一个 GStreetviewPanorama 对象，而后将其放入该容器中。

16 将街道视图对象初始化为引用一个特定位置并显示初始“视点”(POV)。

17 经过检查 603 错误值来处理不受支持的浏览器。

GStreetviewPanorama 对象要求其构造函数中有一个容器元素。您还可使用 GStreetviewPanoramaOptions 参数设置该对象的位置（可选）。能够在构造函数调用结束后调用对象的 setLocationAndPOV() 方法来更改其位置和 POV。

有关容器和设置位置及视点的详细信息，将在下文中介绍。

街道视图容器

街道视图 Flash 查看器须要一个 DOM 容器节点，此节点用于显示查看器的内容（一般是 <div> 元素）。为使全景图像达到最佳显示效果，建议尺寸最小为 200 像素 x 200 像素。也不建议使用大查看器，由于大查看器可能致使 Flash 查看器消耗太多内存，并可能对浏览器的性能带来负面影响。

GStreetviewPanorama 构造函数须要一个 container 参数来肯定初始容器元素，该容器元素中将显示街道视图 Flash 查看器。能够对 GStreetviewPanorama 对象应用 hide()，使其暂时不显示；也能够对该对象应用 show()，使其从新显示出来。

在任什么时候候，若是您想要更改街道视图 Flash 查看器的容器，请向容器发送 setContainer() 方法，从而向该容器传递其应当关联的新元素。若是调整了容器的大小，您能够向 GStreetviewPanorama 对象发送 checkResize() 方法，以强制它调整大小，从而适合其新尺寸。

若是想要从 DOM 中完全删除街道视图 Flash 查看器并释放其内存，请向该对象传递 remove() 方法。若是想要从 DOM 中删除容器元素，则必须调用该方法，不然将致使客户端浏览器的内存泄漏。

街道视图位置

街道视图图像包含一个位置（对应于 GLatLng）和一个特定的方向 (GPov)，两者共同标识图像显示的视图。这两个参数均可以在构造街道视图对象时使用 GStreetviewPanoramaOptions 可选参数来指定。

当前受支持的街景视图的城市列表能够从 Google 地图帮助中心得到。可经过三种基本方法来肯定某个位置是否支持街道视图数据：

· 能够存储已知有效的街道视图位置的 GLatLng。

· 能够检查 GStreetviewOverlay 图块叠加层，而后目测检查道路网络。支持街道视图的道路在叠加层上以蓝色高亮显示。而后您可使用单击事件或地址解析逻辑将受支持的位置传递给 GStreetviewPanorama 对象。（请参见街道视图叠加层。）

· 您可使用 GStreetviewClient 对象，对指定了传递 GLatLng 的街道视图对象执行查询。GStreetviewClient 对象支持使用大量查询来查找全景数据。（请参见街道视图客户端查询。）

请注意，后两种方法是不精确的：在这些状况下，街道视图服务不须要（且一般不接收）精确的经度和纬度，而是搜索是否存在“接近”指定 GLatLng 的全景数据。

如下示例使用 GStreetviewPanoramaOptions 指定要用于街道视图的初始经度和纬度。POV 保留为空，表示使用默认视图朝向北方。

var fenwayPark= new GLatLng(42.345573,-71.098326);
panoramaOptions= { latlng:fenwayPark};
var myPano= new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);

查看示例 (streetview-simple.html)

街道视图错误处理

因为街道视图要求支持 Flash® 插件，所以您的代码应检查该插件在用户浏览器上是否可用。也能够经过注册一个对 GStreetviewPanorama 对象上的 error 事件进行侦听的事件侦听器，来在您的应用程序中进行此检查。error 事件可传递一个能够评估的错误代码。

如下示例代码将对是否支持 Flash 插件执行快速检查，若是不支持 Flash 则显示一个警告对话框。

街道视图视点 (POV)

街道视图位置定义一个图像相机的放置位置，可是不定义该图像相机的方向。为了定义相机方向，GPov 对象常量定义了三个属性：

· yaw 定义以相机位置为圆心相对于正北方向的旋转角度（以度为单位）。摆角按顺时针方向测量（90 度为正东方向）。

· pitch 定义相对于相机初始默认倾斜度的“向上”或“向下”差值，默认倾斜度一般为（但不老是）平直水平。（例如，在山上拍摄的图像所表现出的默认倾斜度可能不是水平的。）测量倾斜角度时，向上看为负值（最大为 –90 度，竖直向上并与默认倾斜面垂直），向下看为正值（最大为 +90 度，竖直向下并与默认倾斜面垂直）。

· zoom 定义此视图的缩放级别（有效地限制“视野”），0 表示彻底缩小。不一样的街道视图位置可能提供更高或更低的缩放级别。

默认状况下，这些值均为 0，所定义的视图为平直水平，方向为正北，且显示最宽的视野。

设置全景视图

如前文所述，能够在构造全景对象时使用 GStreetviewPanoramaOptions 参数设置该对象的位置和 GPov。

fenwayPark= new GLatLng(42.345573,-71.098326);
myPOV= {yaw:370.64659986187695,pitch:-20};
svOpts= {latlng:fenwayPark, pov:myPOV};
var myPano= new GStreetviewPanorama(document.getElementById("pano"), svOpts);

在构造 GStreetviewPanorama 对象后，您还可使用 setLocationAndPOV() 方法设置位置和 POV。在如下示例中，咱们将建立一个 GStreetviewPanorama 对象，而后将其位置和 POV 设置为某个特定值。

var myPano= new GStreetviewPanorama(document.getElementById("pano"));
fenwayPark= new GLatLng(42.345573,-71.098326);
myPOV= {yaw:370.64659986187695,pitch:-20};
myPano.setLocationAndPOV(fenwayPark, myPOV);

查看示例 (streetview-object.html)

使用街道视图叠加层

肯定道路是否支持街道视图的最简单方法是经过使用 GStreetviewOverlay 对象。只需建立一个此类型的叠加层，而后将其添加到地图中；包含街道视图数据的道路将使用蓝色边界在地图上高亮显示。

var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
svOverlay= new GStreetviewOverlay();
map.addOverlay(svOverlay);

查看示例 (streetview-layer.html)

当您知道某个地理区域支持街道视图后，能够经过填充 GStreetviewPanorama 对象在有效的街道视图道路上添加可响应单击操做的逻辑。

var myPano= new GStreetviewPanorama(document.getElementById("pano"));
var map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.345573,-71.098326), 14);
svOverlay= new GStreetviewOverlay();
map.addOverlay(svOverlay);
GEvent.addListener(map,"click", function(overlay,latlng) {
myPano.setLocationAndPOV(latlng);
});

查看示例 (streetview-click.html)

若是您知道某个特定位置支持街道视图，则能够保存该位置信息和 POV 并将这些信息放入对象自己。

街道视图客户端查询

从用户角度而言，经过目测检查 GStreetviewOverlay 的方式来肯定某条道路是否支持街道视图一般不太可行，也不可取。出于此缘由，API 提供了一种以程序方式发出请求并检索街道视图数据的服务。此服务经过使用 GStreetviewClient 对象获得简化。

执行街道视图查找

GStreetviewClient 对象使用 Google 的街道视图服务执行全景数据查找。因为此种查找为异步进行，因此此类方法须要在接收数据时执行回调函数。若是未返回值，那么指定的全部回调都会传递 null，所以您应当检查您的回调函数中是否存在这种状况。

GStreetviewClient 方法 getNearestPanoramaLatLng() （其自己做为 GLatLng 传递）会从指定的位置检索邻近的全景图像的 GLatLng。

getNearestPanorama() 和 getPanoramaById() 反而会检索 GStreetviewData 对象，该对象存储关于特定全景对象的元数据。此类数据在下文中介绍。

处理客户端响应

GStreetviewData 对象的结构包含三种属性：location、copyright（包含正显示的特定图像的信息），以及links（提供有关邻近全景对象的信息）。这些属性的结构以下所述：

# The location property uses the GStreetviewLocation object literal

location: {

latlng: GLatLng,

pov: {

yaw: String,

pitch: String,

zoom: String

description: String,

panoId: String

}

# The links property uses the GStreetviewLink object literal

links[]: {

yaw: String,

description: String,

panoId: String

}

（GStreetviewLocation 和 GStreetviewLink 对象常量的完整说明位于地图 API 参考中）。

注意：不该将 GStreetviewData.location 属性与 window.location 属性混淆。若是尝试今后对象的 location 属性中抽取数据，请确保您确实接收到了从街道视图服务器传回的响应（以下所示）。不然，location 属性将默认为 window.location，而且将发生意外行为。

若是对 GStreetviewClient 对象的请求成功，它会将 GLatLng 或 GStreetviewData 对象传递给指定的回调函数。由于检索街道视图数据为异步进行，然而，客户端对象可能不检索这些数据对象，所以您的代码不该依赖于这些对象是否显示。相反，您应始终检查一定会返回的任何请求所返回的 code 值。如下代码段说明了此概念。

panoClient= new GStreetviewClient();
panoClient.getPanoramaById(panoData.location.panoId, processReturnedData);

function processReturnedData(panoData) {
if (panoData.code!= 200) {
   GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
   return;
}

// Code to actually process the GStreetviewData object is contained here

}

包含示例 GStreetviewData 结构的完整响应以下所示：

{
location: {
    latlng: GLatLng("42.345566, -71.098354")
    pov: {
      yaw: "370.64659986187695"
      pitch: "-20"
      zoom: "1"
   }
    description: "Yawkey Way"
    panoId: "-KNGDaZvSQjMqug7ISM_CA"
}
copyright: "© 2008 Google"
links:[ {
    yaw: "0"
    description: "Yawkey Way"
    panoId: "S142iWXa_4Fi7L7d8HKhuQ"
},
{
    yaw: "0"
    description: "Yawkey Way"
    panoId: "2vFI79AjOpHTAYJSCKquFg"
}
]
}

如下样本应用程序将显示初始全景对象，抽取其 ID，而后存储返回的 GStreetviewData 对象中的连接全景对象，并显示与该街道视图对象相关的数据集。用户每次单击“下一步”时，该过程都会重复，容许用户“行进”过一组邻近全景对象。

var map;
var myPano;
var panoClient;
var nextPanoId;

function initialize() {
var fenwayPark= new GLatLng(42.345573,-71.098326);
var fenwayPOV= {yaw:370.64659986187695,pitch:-20};

   panoClient= new GStreetviewClient();

map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(fenwayPark, 15);
GEvent.addListener(map, "click", function(overlay,latlng) {
    panoClient.getNearestPanorama(latlng, showPanoData);
});

   myPano= new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(fenwayPark, showPanoData);
}

function showPanoData(panoData) {
if (panoData.code!= 200) {
   GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
   return;
}
nextPanoId= panoData.links[[0[].panoId;
var displayString= [[
   "Panorama ID: " + panoData.location.panoId,
   "LatLng: " + panoData.location.latlng,
   "Copyright: " + panoData.copyright,
   "Description: " + panoData.location.description,
   "Next Pano ID: " + panoData.links[[0[].panoId
[].join("
");
map.openInfoWindowHtml(panoData.location.latlng, displayString);

GLog.write('Viewer moved to' + panoData.location.latlng);
myPano.setLocationAndPOV(panoData.location.latlng);
}

function next() {
// Get the next panoId
// Note that this is not sophisticated. At the end of the block, it will get stuck
panoClient.getPanoramaById(nextPanoId, showPanoData);
}

function handleNoFlash(errorCode) {
if (errorCode== 603) {
    alert("Error: Flash doesn't appear to be supported by your browser");
   return;
}
}

查看示例 (streetview-data.html)

与 Google 地球插件集成

Google 地图 API 如今可以让开发人员处理其地图 API 应用程序中的 Google 地球实例（须要经过单独安装 Google 地球插件）。Google 地球地图层经过外观和行为都像独立 Google 地球应用程序的单独 GMapType 显示，这样您就能够在浏览器中旋转视角、观看立体图以及查看 Google 地球 KML 信息。

注意：Google 地球插件必须安装在用户的计算机上才能使用该 Google 地球 GMapType。当前，此插件仅适用于 Microsoft Windows。有关完整的系统要求，请参见 Google 地球 API 开发人员指南。

加载 Google 地球插件（仅适用于 Windows）

适用于 Windows 的 Google 地球插件可从如下网址得到：

http://earth.google.com/intl/zh-CN/

Google 地球插件可经过本身的 API 进行控制，它本身的 API 与 Google 地图 API 是互相独立的，也是不一样的。有关使用该插件和 Google 地球 API 的详细信息，请参见 Google 地球 API 开发人员指南。

也可在 Google 地图 API 中对 Google 地球插件进行实例化。

初始化 Google 地球插件

要将 Google 地球实例添加至您的地图，只需经过 GMap2.addmapType() 将 G_SATELLITE_3D_MAP 添加至您的地图。而后，能够将地图设置为直接显示此地图类型（经过 GMap2.setMapType()），用户也可本身在 GMapTypeControl 中选择此地图类型（经过用 GMap2.addControl() 来添加一个地图类型控件）。

如下代码会将 G_SATELLITE_3D_MAP 地图类型添加到地图，而后显式地将地图设置为在地图中显示 Google 地球地图类型。（请注意，第一次点击此示例时，系统会提示您安装 Google 地球插件）。

var map= new GMap2(document.getElementById("map_canvas"),{ size: new GSize(640,480) } );
map.setCenter(new GLatLng(39.927, 116.407), 11);
map.addMapType(G_SATELLITE_3D_MAP);
var mapControl= new GMapTypeControl();
map.addControl(mapControl);
map.setMapType(G_SATELLITE_3D_MAP);

查看示例 (services-earth-plugin.html)

本地搜索

若是要向您的网站中添加本地搜索功能，可使用 Google AJAX 搜索 API 在网站中嵌入本地搜索控件。此控件是 GControl 对象的一个子类，是一个很好的建立自定义控件的示例。

向您的地图 API 应用程序中添加此控件以前，须要添加 Google AJAX 搜索 API 的网址，并使用地图 API 密钥才能使用该服务。您还须要加载该控件对象的样式表，以下所示：

// Load the Code
<script src="http://www.google.cn/uds/api?file=uds.js&v=1.0&key=ABCDEF"
type="text/javascript"></script>
<script src="http://www.google.cn/uds/solutions/localsearch/gmlocalsearch.js"
type="text/javascript"></script>

// Load the Style Sheets
<style type="text/css">
@import url("http://www.google.cn/uds/css/gsearch.css");
@import url("http://www.google.cn/uds/solutions/localsearch/gmlocalsearch.css");
</style>

或者可使用 AJAX 加载器，经过公共加载器加载全部这些模块。

执行完这些准备任务以后，加载控件自己相对比较简单：

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

// create a local search control and add it to your map
var lsc= new google.maps.LocalSearch();
map.addControl(new google.maps.LocalSearch());

查看示例 (control-localsearch.html)

关于本地搜索控件的详细信息，请参见 Google AJAX 搜索 API 参考。

KML/GeoRSS 叠加层

Google 地图 API 支持用于显示地理信息的 KML 和 GeoRSS 数据格式。使用 GGeoXml 对象将这些数据格式添加到地图，该对象的构造函数采用可公开访问的 XML 文件的网址。GGeoXml 地标显示为 GMarker，而 GGeoXml 折线和多边形显示为 Google 地图 API 折线和多边形。KML 文件中的 <GroundOverlay> 元素显示为地图上的 GGroundOverlay 元素。

使用 addOverlay() 方法将 GGeoXml 对象添加到地图。（您可使用 removeOverlay() 从地图中删除它们。）KML 和 GeoRSS XML 文件均受支持。请注意，GGeoXml 是 Google 地图 API 中的一个模块化对象，而且在首次使用后才会彻底加载。所以，请仅当页面彻底加载后再调用其构造函数。此操做一般经过在 <body> 的 onload 处理程序中调用 GGeoXml 构造函数来完成。

// The GGeoXml constructor takes a URL pointing to a KML or GeoRSS file.
// You add the GGeoXml object to the map as an overlay, and remove it as an overlay as well.
// The Maps API determines implicitly whether the file is a KML or GeoRSS file.

var map;
var geoXml;

function initialize() {
if (GBrowserIsCompatible()) {
    map= new GMap2(document.getElementById("map_canvas"));
    geoXml= new GGeoXml("http://mapgadgets.googlepages.com/cta.kml");
    map.addControl(new GLargeMapControl());
  map.setCenter(new GLatLng(39.917, 116.397), 11);
    map.addControl(new GLargeMapControl());
    map.addOverlay(geoXml);
}
}

查看 GeoRSS 示例 (geoxml-rss.html)

查看 KML 示例 (geoxml-kml.html)

交通叠加层

Google 地图 API 可以让您使用 GTrafficOverlay 对象（其应用 GOverlay 接口）向地图中添加交通讯息。可使用 GMap2.addOverlay() 方法向地图中添加交通讯息。GTrafficOverlay 有两种方法（hide() 和 show()）用于切换是否显示交通叠加层。只有支持的城市才能显示交通讯息。

也可使用 GTrafficOverlayOptions 对象常量向 GTrafficOverlay 构造函数传递选项。

// The GTrafficOverlay is unique in that only one object of that type
// should be added to a map. Adding multiple traffic overlays produces
// no added benefit.

var map;
var trafficInfo;

function initialize() {
map= new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
var trafficOptions= {incidents:true};
trafficInfo= new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
}

查看交通示例 (trafficOverlay.html)

行车路线

您可使用 GDirections 对象添加该功能来计算行车路线（使用各类交通方式）。GDirections 对象使用查询字符串（例如“New York, NY to Chicago, IL”）或提供的文字经度/纬度（例如“-73.967257, 40.712882 to -87.770677, 41.943181”）请求和接收行车路线结果。GDirections 对象还支持使用一系列路标的多段行车路线。行车路线能够在地图上显示为绘制路线的折线和/或 <div> 元素中的一系列文本描述（例如“向右转到 Williamsburg Bridge 斜道”）。

要在 Google 地图 API 中使用行车路线，请建立类型为 GDirections 的对象，并指定用于接收和显示结果的 GMap2 对象和/或 <div>。默认状况下，地图居中而且经过返回的路线限制边界（尽管能够在 GDirectionOptions 对象中使用参数进行更改）。

加载行车路线

行车路线使用 GDirections.load() 方法请求。此方法取查询字符串和一组可选的 GDirectionsOptions 参数。有如下选项可用：

· locale 指定返回结果所使用的语言，以覆盖地图 API hl 参数（若是提供的话）。若是 locale 和 hl 参数都未指定，则使用浏览器的默认语言。

· travelMode 指定计算结果时使用的交通方法。

· avoidHighways 指定计算行车路线时应避开公路。

· getPolyline 指定行车路线对象应返回折线数据，以绘制返回的行车路线。默认状况下，若是有地图对象显示折线数据，GDirections 对象会仅返回这些数据。若是将该值设置为 true 而且不提供地图，那么您应直接处理折线数据。

· getSteps 指定行车路线对象应返回文字行车路线，即便未提供 <div> 面板来显示这些行车路线也是如此。若是将该值设置为 true 而且不提供面板，那么您应直接处理路段数据。

· preserveViewport 指定地图不该自动居中并缩放到返回的行车路线的边界框；相反，地图会在当前视口中保持居中位置。

出行模式

默认状况下，行车路线会假定您是驾车行驶，但您能够经过在调用 Directions.load() 方法时传递 GTravelMode 来请求其余出行模式。支持如下出行方式：

· G_TRAVEL_MODE_DRIVING 指示使用路网的标准行车路线

· G_TRAVEL_MODE_WALKING 请求经过步行街和人行道（若是有）的步行路线。

注意：步行路线有时可能不包括畅通的步行街，所以步行路线仅当您在 GDirections 构造函数中提供了 <div> 时才受支持；此 <div> 用于在返回的分路段显示文字路线中向用户显示警告。若是没有此类 <div>，则在请求步行路线时就会返回错误。

处理返回的行车路线

若是 GDirections 对象使用提供的 GMap2 对象构建，则返回的行车路线将包含折线叠加层。若是使用提供的 <div> 元素构造 GDirections 对象，则返回的行车路线将包含一个 GRoute 对象，该对象包含一组 GStep 对象。（若是行车路线包括多点行车路线，则返回的行车路线将包含多个 GRoute 对象，其中每一个都包含一系列的 GStep 对象。）

请注意行车路线对象不会当即填充此返回信息。所以，GDirections 对象定义了一个“load”事件，以截获该事件来肯定此状态。

默认状况下，返回行车路线后，地图会显示一条显示路线的折线，而文字行车路线则会显示在为达到此目的而提供的 <div> 中。GDirections 对象还会内部存储您可使用 GDirections.getPolyline() 和/或 GDirections.getRoute(i:Number) 方法检索的结果。可使用 GRoute.getStep(i:Number) 方法检索路线中的路段，使用 GStep.getDescriptionHtml() 方法检索该路段的 HTML 摘要。（请参见下面的路线和路段。）

GDirections 对象还会触发您能够截获的三个事件：

· “load”：此事件在成功返回行车路线结果、但向地图/面板添加任何叠加层元素以前触发。

· “addoverlay”：在将折线和/或文本格式的行车路线组件添加到地图和/或 DIV 元素以后会触发此事件。

· “error”：若是行车路线请求致使错误，则触发此事件。调用者可使用 GDirections.getStatus() 获取有关该错误的详细信息。

// Create a directions object and register a map and DIV to hold the
// resulting computed directions

var map;
var directionsPanel;
var directions;

function initialize() {
map= new GMap2(document.getElementById("map_canvas"));
directionsPanel= document.getElementById("my_textual_div");
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
directions= new GDirections(map, directionsPanel);
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}

查看示例 (directions-simple.html)

如下示例与第一个示例相同，只是行车路线经过传递 G_TRAVEL_MODE_WALKING 调用：

查看示例 (directions-walking.html)

路线和路段

GDirections 对象还支持多点的行车路线，可使用 GDirections.loadFromWaypoints() 方法构建。此方法取文本输入地址或文本经纬度点的数组。每一个单独的沿途路标均计算为单独的路线并在单独的 GRoute 对象中返回，其中每一个都包含一系列的 GStep 对象。

GRoute 对象存储路线的路段（类型为 GStep）数目、路线的起点和终点地址解析以及计算出的其余信息，如距离、历时和终点的精确经纬度（若是地址解析不依赖于路段，则可能与终点地址解析不一样）。每一个 GStep 对象还包含文本描述（例如“经过到 San Jose 的斜道驶上 US-101 S”）以及计算出的信息，包括距离、历时和精确经纬度。

有关行车路线 API 包中的各个对象、方法和事件的完整文档，请参见 API 参考。

查看示例 (directions-advanced.html)