我收集的谷歌地图api实例

1、开发指南地图基础知识简介地图的“o, World”加载地图 API地图 DOM 元素GMap2 - 基本对象初始化地图加载地图经度和纬度地图属性地图交互信息窗口任何地图 API 应用程序中的基础元素都是“地图”本GMap2 基础对象的用法和地图操作的基础知身。本文档识。错误!超地图的“o, World”无效。开始学习地图 API 最简单的方式是看一个简单的示例。下面的网页显示以地图。的故宫博物院为中心的 500 x300 的Maps JavaScript API Exle错误!超无效。简介function initialize() if (patible() varmap=newGMap2(1

2、3);.geementById(map canvas);map.setCenter(new GLng(39.9493, 116.3975),您可以查看此示例及、编辑和调试该示例，但必须将该文件中的密钥替换为您自己的 地图 API 密钥。（如果了特定目录的密钥，也可以将其用于所有子目录。）即使在此简单的示例中，也需要注意五点：使用 script包含地图 API JavaScript。创建名为“map_canvas”的 div 元素来包含地图。编写 JavaScript 函数创建“map”对象。 将地图的中心设置为指定的地理点。 从 body的 onLoad 事件初始化地图对象。下面说明了这些步骤

3、。无效。加载地图 API错误!超http/maps?file=api&v=2&key=abcdefg指向包含使用地图 API 所需所有符号和定义的JavaScript 文件的位置。您的页面必须包含指向此的script，使用API 时收到的密钥。在此示例中，该密钥显示为“abcdefg”。请注意也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中，其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或false。无效。地图 DOM 元素错误!超style=width:500px;height:要让地图在网页上显示，必须为其留出一个位置。

4、通常，通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的执行此操作。在上述示例中，定义名为“map_canvas”的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。无效。GMap2 - 基本对象错误!超var GMap2(map=.geementById(map_canvas);newGMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）使用 JavaScript new 操

5、作符创建此类的一个新实例。当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。HTML 节点是 JavaScript对 象 的 子 对 象 ， 而 且通 过.geementById() 方法获得该元素的。此代码定义了一个变量（名为 map），并将新 GMap2 对象赋值给该变量。函数 GMap2() 称为“构造函数”，其定义（在 地图 API 参简述）如下所示：请注意因为 JavaScript 是松散类型的语言，造函数的任何可选参数，此处也未这样做。可以不填写构无效。初始化地图错误!超map.setCenter(new GLng(39.9493, 116

6、.3975), 13);通过 GMap2 构造函数创建地图后，需要再做一件事：将其初始化。初始化通过地图的setCenter() 方法完成。setCenter() 方法要求有 GLng 坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设构造函数说明GMap2(cont ainer, opts?)在通常是一个 DIV 元素的指定 HTMLcontainer 内创建新地图您也可以通过 opts参数传递 GMap2Options 类型的可选参数图本身的其他任何属性。无效。加载地图错误!超当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收其他外部图像和并将其合

7、并到对象中。为确保的地图仅放置在完全加载后的页面上，仅在 HTML 页面的 元素收到 onload 事件后才执行构造 GMap2对象的函数。这样做可以避免出现不可预期的行为，并使可以对地图绘制的方式和时间进行控制。onload 属性是事件处理程序的示例。地图 API 还提供了大量事件可以用来“”状态变化。请参阅地图事件和事件器以了解信息。GUnload() 函数是用来防止内存泄漏的实用工具函数。无效。经度和纬度错误!超既然现在已经有地图了还需要法来地图上的位置。在地图 API 中，GLng 对象提供了此类机制。可以构造一个 GLng 对象，按照制图学的惯例以 经度, 纬度 的顺序传递参数：va

8、rmyGeographicCoordinates=newGLng(myLatitude, myLongitude)注意：将“地址”转变为地理点的过程称为“地址”，将在“地图 API 服务”部分中详细。就像它可用于轻松地地理点一样，它也可用于定义对象的地理边界。例如，地图在称为视口的窗口内显示整个世界的当前“窗口 ”。 此 视 口 可 以 通 过 四 个 角 上 的 矩 形 点 来 定 义 。 GL ngBounds 对象提供了这个功能，通过使用分别表示边界框的西南角和东北角的两个 GL ng 对象定义一个矩形区域来实现。GLng 对象在地图 API 中用途广泛。例如，GMarker 对象在其构

9、造函数中具有 GLng，并在地图上的指定地理位置放置标记“叠加层”。下面的示例使用 getBounds() 返回当前视口，然后在地图上的这些边界内随机放置 10 个标记：function initialize() varmap=newGMap2(.geementById(map canvas);map.setCenter(new GLng(39.9493, 116.3975), 13);/ Add 10 markers to the map at random locations var bounds= map.getBounds();var southWest= bounds.getSout

10、hWest(); var northEast= bounds.getNorthEast();var lngSpan= northEast.lng() - southWest.lng(); var latSpan= northEast.lat() - southWest.lat(); for (var i= 0; i 10; i+) var po= new GLng(southWest.lat() + latSpan* Math.random(),southWest.lng() + lngSpan* Math.random();map.addOverlay(new GMarko);查看示例 (m

11、ap-markers.html)注意：有关 GMarker 对象的详细信息位于叠加层部分中。无效。地图属性错误!超默认情况下，在图块显示。但是，地图 API 中，地图使用标准的“绘制”地图 API 也支持其他地图类型。以下是标准地图类型：G_NORMAL_MAP- 默认视图G_SALITE_MAP - 显示地球图像G_HYBRID_MAP - 混合显示普通视图和视图G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用可以使用 GMap2 对象的 setMapType() 方法设图类型。视图：例如，下面的代码将地图设置为使用地球的varmap=newGMa

12、p2(.geementById(map canvas);map.setMapType(G_SALITE_MAP);地图还包含对了解情况非常有用的大量属性。例如，要了解当前视口的尺寸，可使用 GMap2 对象的 getBounds() 方法来返回 GL ngBounds 值。每个地图还包含一个“缩放级别”，用于定义当前视图的分辨率。在普通地图视图内，可以使用 0（最低缩放级别，在地图上可以看到整个世界）到 19（最高缩放级别，可以看到独立建筑物）之间的缩放级别。缩放级别因所查看地区而异，因为地球上某些地区的数据比其他地区更详细。在视图中可以使用多达 20个缩放级别。可以通过使用 GMap2 对象

13、的 getZoom() 方法检索地图当前使用的缩放级别。关于缩放级别、地图图块以及创建自己的自定义地图类型的信息，请参阅图块叠加层部分。无效。地图交互错误!超既然现在有了 GMap2 对象，就可以与之进行交互了。基本地图对象的外观和行为与您在地图上交互的地图非常相似，并带有大量内置行为。GMap2 对象还提供了大量配置方法来改变地图对象本身的行为。默认情况下，和在 http上一样，地图对象会对用户的活动做出反应。但您可以使用大量实用工具方法改变此行为。例如，GMap2.disableDragging() 方法了点击并拖拽地图到新位置的功能。您还可以通过编程与地图交互。GMap2 对象支持可以直

14、接改变地图状态的大量方法。例如，setCenter()、panTo 和 zoomIn()方法通过编程来操作地图，而不是通过用户交互来操作地图。 下面的示例显示一个地图，等待两秒钟，然后平移到新中心点。 panTo 方法将地图中心设置在指定点处。如果指定点位于地图的可见部分，则地图会平稳地平移到该点，否则会跳至该点。varmap=newGMap2(.geementById(map canvas);map.setCenter(new GLng(39.9493, 116.3975), 13); window.setTimeout(function() map.panT, 1000);GLng(39.

15、927, 116.407);查看示例 (map-animate.html)可以通过使用 地图 API 事件进行更复杂的交互。无效。信息窗口错误!超所有使用地图API 的地图都有可能显示类型为GInfoWindow 的单个“信息窗口”，该窗口在地图上端以浮动窗口显示 HTML 内容。信息窗口有点像上的文字气球；它有一个内容区域和锥形引线，引线的头在地图的指定点上。点击 地图上的标记可以看到活动的信息窗口。 GInfoWindow 对象没有构造函数。当创建地图时，会自动创建一个信息窗口并将其附加到地图上。对于指定的地图，一次不能显示多个信息窗口，但可以移动信息窗口并可以更改其内容（如果需要）。GM

16、ap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。 GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。要创建信息窗口，请调用 openInfoWindow 方法，并向其传递位置和要显示的 DOM 元素。下面的示例代码显示了一个信息窗口，该窗口锚定在地图中心，内容为一条简单消息“world”。o,varmap=newGMap2(.geementById(map canvas)

17、;map.setCenter(new GLng(39.9493, 116.3975), 13); map.openInfoWindow(map.getCenter(),.createTextNode(o,world);查看示例 (map-infowindow.html)有关信息窗口的完整文档，请查阅地图 API 参考事件地图事件概述事件器在事件器中使用闭包在事件中使用传递的参数将事件绑定到对象DOM 事件删除事件器浏览器中的 JavaScript 是“事件驱动的”，这表示 JavaScript通过生成事件来响应交互，并期望程序能够“”感的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在

18、DOM内的事件。对某些事件感的程序会为这些事件JavaScript 事件器，并在接收这些事件时执行代码。地图 API 通过为地图 API 对象定义自定义事件而添加到此事件模型中。请注意，地图 API 事件是独立的，与标准DOM 事件不同。但是，由于不同的浏览器实现不同的 DOM 事件模型，因此地图 API 还提供需处理各种跨浏览器特性的机制。和响应这些 DOM 事件但无无效。事件器错误!超通过使用 GEvent 命名空间中的实用工具函数事件器，来处理地图 API 中的事件。每个地图 API 对象都导出大量已命名的事件。例如，GMap2 对象导出 click、 dblclick 和 move 事

19、件，以及其他许多事件。每个事件都在指错误!超无效。地图事件概述定的环境下发生，并且可以传递标识环境的参数。例如，当用户在地图对象中移动鼠标时，会触发 mousemove 事件，并且该事件会传递鼠标所在地理位置的 GL ng。有关GMap2 事件及其生成的参数的完整列表，请参见GMap2.Events。用来获取这些事件的相关通知的器，请使用静态方法GEvent.addListener()。该方法有三个参数，一个对象，一个待事件以及一个在指定事件发生时调用的函数。例如，每当用户点击地图时,下面的代码段都会显示警告:varmap=newGMap2(.geementById(map);map.setC

20、enter(new GLng(39.9493, 116.3975), 13); GEvent.addListener(map, click, function() alert(您点击了地图。););查看示例 (event-simple.html)器也能够捕获事件的环境。在下面的示例代码中，显示用户拖动地图后地图中心的经度和纬度。varmap=newGMap2(.geementById(map);GEvent.addListener(map, moveend, function() var center= map.getCenter();.geementById(message).innerHT

21、ML= center.toString(););map.setCenter(new GLng(39.9493, 116.3975), 13);查看示例 (event-context.html)无效。在事件器中使用闭包错误!超当执行事件器时，一个常用的好方法就是将私有数据和持久性数据附加到一个对象。JavaScript 不支持“私有”实例数据，但它却支持闭包，闭包允许函数外部变量。在事件器中，通常不附加到发生事件的对象的变量时，闭包非常有用。下面的示例在事件器中使用函数闭包将加密消息分配给一组标记。点击每个标记都可以看到加密消息的一部分，该消息并不包含在标记自身。var GMap2(map= e

22、mentById(map_canvas);new.gemap.setCenter(new GLng(39.9493, 116.3975), 13);/ Creates a marker at the given po/ The five markers show a secret message when clicked/ but datat message is not within the markers instancefunction createMarko, number) var marker= new GMarko);var message= 这,是,个,消息;marker.va

23、lue= number;GEvent.addListener(marker, click, function() var myHtml= # + number+ + messagenumber-1;map.openInfoWindowHtml(po, myHtml););return marker;/ Add 5 markers to the map at random locations var bounds= map.getBounds();var southWest= bounds.getSouthWest(); var northEast= bounds.getNorthEast();

24、var lngSpan= northEast.lng() - southWest.lng(); var latSpan= northEast.lat() - southWest.lat(); for (var i= 0; i 5; i+) varpo=newGLng(southWest.lat()+latSpan*Math.random(),southWest.lng() + lngSpan* Math.random();map.addOverlay(createMarko, i+ 1);查看示例 (event-closure.html)无效。在事件中使用传递的参数错误!超地图 API 事件系

25、统中的许多事件在触发事件时都会传递参数。例如，如果地图点击发生在叠加层上，GMap2“点击”事件会传递 overlay 和 overlayl ng；否则，它传递地图坐标的lng。可以通过将指定的符号直接传递给事件器中的函数来这些参数。在下面的示例中，首先进试，即检查是否定义了 lng参数，以确保点击发生在地图图块上；这样，就可以在坐标点的上方打开一个信息窗口，并在信息窗口中显示转化为像素的坐标以及地图的缩放级别。varmap=newGMap2(.geementById(map canvas);map.setCenter(new GLng(39.9493, 116.3975), 13);GEve

26、nt.addListener(map,click, function(overlay, l if (lng) ng) +varmyHtml=GPo为:map.fromLngToDivPixel(lng) + ,缩放级别: + map.getZoom(); map.openInfoWindow(lng, myHtml););map.addControl(new GSmallMapControl(); /增加控制条map.addControl(new GMapTypeControl(); / 增加图和普通地图的显示查看示例 (event-arguments.html)地无效。将事件绑定到对象方法错

27、误!超当您希望将事件器附加到对象的特定实例时，函数非常有用。如果您不希望这样，而是希望响应事件时对象的所有实例都调用某方法，可以使用 GEvent.bind()。在下面的示例中， MyApplication 的实例将地图事件与其成员方法绑定在一起，当触发事件时会修改类状态：function MyApplication() this.counter= 0;this.map=newGMap2(.geementById(map);this.map.setCenter(new GLng(39.9493, 116.3975), 13); GEvent.bind(this.map, click, this

28、, this.onMapClick);MyAtotype.onMapClick= function() this.counter+;alert(这是您第 + this.counter+ + 次点击var application= new MyApplication();查看示例 (event-bind.html)DOM 事件错误!超无效。地图 API 事件模型创建并管理自己的自定义事件。但是，DOM 也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。如果您希望捕获并响应这些事件，地图API 提供的独立于浏览器的包装器可以和绑定 DOM 事件而不需要自定义代码。GEvent.addDom

29、Listener() 静态方法为DOM 节点上的DOM 事件事件处理程序。同样，GEvent.bindDom() 静态方法允许您为类实例上的 DOM 事件事件处理程序。无效。删除事件器错误!超不再需要事件器时，应将其删除。甚至在事件只需触发一次的情况下，也可能需要删除。删除闭包内的函数所定义的事件器 可 能 很。 但 是 ， addListener() 、addDomListener() 、 bind()和bindDom()函 数 会 返回GEventListener 句柄，可用来最终取消处理程序。下面的示例通过在地图上放置标记来响应点击。任何后续点击都可 删 除 事 件器 。 请 注 意 ，

30、 这 会 导 致 不 再 执 行removeOverlay() 代码。另请注意，您甚至可以从事件器自身删除事件器。function MyApplication() this.counter= 0; this.map=newGMap2(.geementById(map);this.map.setCenter(new GLng(39.9493, 116.3975), 13);var myEventListener= GEvent.bind(this.map, click, this,function(overlay, lng) if (this.counter= 0) if (lng) this.

31、map.addOverlay(new GMarker(l this.counter+; else if (overlayinstanceof GMarker) this.removeOverlay(marker)ng) else GEvent.removeListener(myEventListener););function load() var application= new MyApplication();查看示例 (event-removal.html)控件地图控件概述向地图添加控件在地图上放置控件修改标准控件的结构创建自定义控件无效。控件概述错误!超http 上的地图包含允许用户与

32、地图交互的UI 元素，这些元素称为“控件”。您可以在地图 API 应用程序中添加这些控件的多种组合。您还可以通过子类化GControl 类来构建自己的自定义控件。地图 API 带有大量可以在地图中使用的内置控件：GLargeMapControl - 一个在地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。GSmallMapControl - 一个在地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。GSmallZoomControl - 小型缩放控件（无平移控件），用于在地图上显示行车路线的小地图弹出窗口。GScaleControl - 地图比例尺GMapTypeCon

33、trol - 让用户切换地图类型（例如“地图”和“”）的按钮GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。erviewMapControl - 位于屏幕一角的可折叠概览地图。所有这些控件都基于 GControl 对象。GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况，因为它们还可以进行配置。这些控件增加的功能可以更改地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息，请参见修改标准控件的结构。下面是当前支持的地图类型列表：G_NORMAL_MA

34、P 显示地图默认的普通二维图块G_SALITE_MAP 显示拍摄的图块G_HYBRID_MAP 同时显示拍摄的图块和普通（突出显示道路、城市名等明显地图特征）图块G_PHYSICAL MAP 根据地形信息显示实际地图图块如果您有图像或者已经定义好的叠加层，也可以定义自己的自定义地图类型。默认情况下， 地图API 提供三种地图类型： G_NORMAL_MAP、G_SALITE_MAP和G_HYBRID_MAP。您可以通过这两种方式来改变地图上可用的地图类型：使用 GMap2.removeMapType() 删除地图类型；使用 GMap2.addMapType() 添加地图类型。无论您何时创建地图

35、类型控件，它都使用当前地图上已经添加的地图类型，并通过控件让用户可以切换这些地图类型。请注意，您必须在添加地图类型控件（主要指 GHierarchicalMapTypeControl）之前指定各地图类型之间的阶层关系，以便地图类型控件可以准确反映这些关系。使用下面的代码可将 G_HYBRID MAP 从添加到地图上的可用地 图 类 型 中 删 除 ， 只 剩 下 两 种 地 图 类 型 。 添 加 GMapTypeControl 后，便只有这两种地图类型可用。varmap=newGMap2(.geementById(map canvas), size: new GSize(640,320) )

36、;map.removeMapType(G HYBRID MAP); map.setCenter(new GLng(39.927, 116.407), 11); var mapControl= new GMapTypeControl(); map.addControl(mapControl); map.addControl(new GLargeMapControl();查看示例 (control-maptypes.html)无效。向地图添加控件错误!超可以使用 GMap2 方法 addControl() 向地图添加控件。例如，要将地图上显示的平移/缩放控件添加到您的地图中，您可以在您的地图初始化

37、代码中添加下面这行语句：map.addControl(new GLargeMapControl();可以向地图添加多个控件。 在本例中，添加内置GSmallMapControl 和 GMapTypeControl 控件，它们分别可以平移/缩放地图以及切换“地图”与“”这两种类型。在地图中添加标准控件后，它们即刻完全生效。varmap=newGMap2(.geementById(map);map.addControl(new GSmallMapControl(); map.addControl(new GMapTypeControl();map.setCenter(new GLng(39.949

38、3, 116.3975), 13);查看示例 (control-simple.html)无效。在地图上放置控件错误!超addControl 方法有第二个可选的参数 GControl ition，可用于指定控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角：G_ANCHOR_TOP_RIGHTG_ANCHOR_TOP_LEFTG_ANCHOR_BOTTOM_RIGHTG_ANCHOR_BOTTOM_LEFT如果不包含此参数，则地图 API 会使用控件指定的默认位置。 GControl ition 还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使

39、用 GSize 对象指定。本示例会将 GMapTypeControl 添加到地图的右上角，填充为 10 个像素。双击地图上的任何位置可以删除该控件，将其放在地图的右下角。varmap=newGMap2(.geementByIdmap canvas);var mapTypeControl= new GMapTypeControl();vartopRight=new newnew newGControlition(G ANCHOR TOP RIGHT, GSize(10,10);varbottomRight=GControlition(G ANCHOR BOTTOM RIGHT, GSize(10

40、,10);map.addControl(mapTypeControl, topRight); GEvent.addListener(map, dblclick, function() map.removeControl(mapTypeControl);map.addControl(newGMapTypeControl(),bottomRight););map.addControl(new GSmallMapControl(); map.setCenter(new GLng(39.9493, 116.3975), 13);查看示例 (control-请参见 GControl itioning.h

41、tml)ition 类参考以了解详细信息。无效。修改标准控件的结构错误!超地图 API 内的大多数控件都提供具有标准行为的简单控件。但是， 有些控件需要初始化才能正常使用。例如， GHierarchicalMapTypeControl 通常需要一定的初始化才能在层叠“菜单”中以正确顺序显示地图类型。此示例将带有准线图块层叠加层的 G_PHYSICAL_MAP 地图类型添加到地图中，然后创建GHierarchicalMapTypeControl 来排列添加到地图的其他地图类型。/ define the crosshair（标准线） tile layer and its required func

42、tionsvarcrossLayer=newGTileLayer(newGCopyrightCollection(), 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 layervar layerTerCross= G PHYSICAL MAP.getTileLayers()0, crossLay

43、er;var mtTerCross= new GMapType(layerTerCross, G PHYSICAL MAP.getProjection(), Ter+);varmap=newGMap2(.geementById(map canvas), size: new GSize(640,320) );map.addMapType(G PHYSICAL MAP); map.addMapType(mtTerCross);map.setCenter(new GLng(39.9493, 116.3975), 4); var mapControl= new GHierarchicalMapType

44、Control();/ Set up map typerelationshipsmapControl.clearRelationships();mapControl.addRelationship(G SALITE MAP,G HYBRID MAP, 文字标记, false);mapControl.addRelationship(G PHYSICAL MAP,mtTerCross, 交叉);/ Add contrter youve specified the relationshipsmap.addControl(mapControl);map.addControl(new GLargeMap

45、Control();查看示例 (control-initialization.html)无效。自定义地图控件错误!超地图 API 还允许您通过子类化 GControl 来创建自定义地图控件。（您并没有在 JavaScript 中实现一个“子类化”对象，而是把这个对象的 prototype 指定为 GControl 对象的实例。）要创建可用的自定义控件，您需要实现在该类中定义的至少两个方法：initialize() 和 getDefaultition()。initialize() 方法必须返回 DOM 元素，而 getDefaultition() 方法必须返回类型为 GControlition

46、的对象。所有自定义的地图控件中的 DOM 元素最终都应该添加到地图容器（也是 DOM 元素）中去，这个地图容器可以通过 GMap2 getContainer() 方法获得。在此示例中，而不是标准创建一个简单的缩放控件，它具有文本地图缩放控件中使用的图形图标。，/ A TextualZoomControl is a GControlt displaystextual Zoom In/ and Zoom Out buttons (as op buttons used ined to the iconic/Maps)./ We define the function function Textual

47、ZoomControl() / To subclass the GControl, we set the prototype object to/ an instance of the GControl object TextualZoomCtotype= new GControl();/ Creates a one DIV for each of the buttons and pla them in a container/ DIV which is returned as our control element. We add the control to/ to the map con

48、tainer and return the element for the map class to/ition properly.TextualZoomCtotype.initialize= function(map) var container=.createElement(div);var zoomInDiv=.createElement(div);this.setButtonStyle (zoomInDiv);container.appendChild(zoomInDiv);zoomInDiv.appendChild(.createTextNode( 放大);GEvent.addDom

49、Listener(zoomInDiv, click, function() map.zoomIn(););var zoomOutDiv=.createElement(div);this.setButtonStyle (zoomOutDiv);container.appendChild(zoomOutDiv);zoomOutDiv.appendChild(.createTextNode(缩小);GEvent.addDomListener(zoomOutDiv, click, function() map.zoomOut(););map.getContainer().appendChild(con

50、tainer); return container;/ By default, the control will appear of thehe top left corner/ map with 7 pixels of padding. TextualZoomCtotype.getDefaultition=function() return new GControl GSize(7, 7);ition(G ANCHOR TOP LEFT, new/ Sets the proper CSS for the given button element. TextualZoomCtotype.set

51、ButtonStyle = function(button) button.style.textDecoration= underline; button.style.color= #0000cc;button.styackgroundColor= white;button.style.font= small Arial;button.styorder= 1px solid black;button.style.padding= 2px;button.style.marginBottom= 3px; button.style.textAlign= center; button.style.wi

52、dth= 6em; button.style.cursor= poer;varmap=newGMap2(.geementById(map);map.addControl(new TextualZoomControl();map.setCenter(new 13);GLng(37.441944,-122.141944),查看示例 (control-custom.html)地图叠加层地图叠加层概述标记可拖动的标记图标自定义图标标记管理器折线绘制折线测地折线编码折线多边形底面叠加层图块叠加层图块层叠加层自定义地图类型地图坐标投影层自定义叠加层地图叠加层概述叠加层是地图上绑定到经度/纬度坐标的对象，会

53、随您拖动或缩放地图而移动。叠加层用于反映您“添加”到地图上以指明点、线或区域的对象。地图 API 有如下几种叠加层：地图上的点使用标记来显示，通常显示自定义图标。标记是 GMarker 类型的对象，并且可以利用 GIcon 类型的对象来自定义图标。地图上的线使用折线（表示点的集合）来显示。线是类型为 GPolyline 的对象。地图上的区域显示为多边形（如果是任意形状的区域）或底面叠加层（如果是矩形区域）。多边形类似于闭合的折线，因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。地图本身使用图块叠加层显示。如果您有自己的系列图块，可以使用 GTileLayerOverl

54、ay 类来改变地图上已有的图块，甚至可以使用 GMapType 来创建您自己的地图类型。信息窗口也是一种特殊的叠加层。但是请注意，信息窗口会自动添加到地图中， 并且地图只能添加一个类型为 GInfoWindow 的对象。每 个 叠 加 层 都 实 现erlay接 口 。 可 以 使 用GMap2.addOverlay()方 法 向 地 图 添 加 叠 加 层 ， 使 用GMap2.removeOverlay() 方法删除叠加层。（请注意，默认情况下信息窗口会自动添加到地图。）标 记 标 识 地 图 上 的 点 。 默 认 情 况 下 ， 它 们 使 用 G_DEFAULT_ICON（您也可以指

55、定自定义图标）。GMarker 构造函数将 GL ng 和 GMarkerOptions（可选）对象作为参数。标记设计为可交互。例如，默认情况下它们接收 click 事件，常用于在事件侦中打开信息窗口。varmap=newGMap2(.geementById(map canvas);map.setCenter(new GLng(39.9493, 116.3975), 13);/ Add 10 markers to the map at random locations var bounds= map.getBounds();var southWest= bounds.getSouthWest(

56、); var northEast= bounds.getNorthEast();var lngSpan= northEast.lng() - southWest.lng(); var latSpan= northEast.lat() - southWest.lat(); for (var i= 0; i 10; i+) varpo=newGLng(southWest.lat()+latSpan*Math.random(),southWest.lng() + lngSpan* Math.random();map.addOverlay(new GMarko);查看示例 (marker-simple

57、.html)可拖动的标记标记是可以点击和拖动到新位置的交互式对象。在此示例中，我标记们将一个可拖动的标记放置在地图上，并它的几个较简单事件。可拖动标记通过实现以下四类事件来表示其拖动状态：click、 dragstart、drag 和 dragend。默认情况下，标记可点击但不可拖动，所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。可拖动标记拖动结束后默认有弹跳效果。如果不喜欢这种效果，请将 bouncy 选项设置为 false，标记会平缓放下。varmap=newGMap2(.geementById(map canvas);var center= new G

58、Lng(39.9493, 116.3975); map.setCenter(center, 13);var marker= new GMarker(center, draggable: true);GEvent.addListener(marker, dragstart, function() map.closeInfoWindow(););GEvent.addListener(marker, dragend, function() marker.openInfoWindowHtml(弹起来了.););map.addOverlay(marker);查看示例 (marker-drag.html)

59、图标（标记）标记可以用自定义的新图标来显示，以替代默认图标。因为地图 API 中一个图标（GIcon 对象）需要由多个不同的图像组成，所以定义图标较为复杂。一个图标最少应定义前景图像、类型为 GSize 的尺寸和用于定位图标的图标偏移值。最简单的自定义图标是基于 G_DEFAULT_ICON 类型来创建。基于此类型创建图标认图标。仅通过修改若干属性即可快速更改默在下面的示例中，先用 G_DEFAULT_ICON 类型创建一个图标，然后使用其他图像来改变默认图像。（使用不同图像时要谨慎，因为它们需要设置为与默认图像相同的正确尺寸才能正常显示。）varmap=newGMap2(.geementBy

60、Id(map canvas);map.addControl(new GSmallMapControl();map.setCenter(new GLng(39.9493, 116.3975), 13);/ Create our tiny marker iconvar blueIcon= new GIcon(G DEFAULT ICON); blueIcon.image=httue-dot.png;/l/en us/mapfiles/ms/micons/bl/ Set up our GMarkerOptions object markerOptions= icon:blueIcon;/ Add 1