google地图使用文档.docx

3.4.GMap2-基本对象

varmap=newGMap2（document.getElementById（"map_canvas"））;

构造函数

说明

GMap2（container,opts?

）

在通常是一个DIV元素的指定HTMLcontainer内创建新地图。

您也可以通过opts参数传递GMap2Options类型的可选参数。

3.5.初始化地图

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

3.6.加载地图

3.7.经度和纬度

varmyGeographicCoordinates=newGLatLng（myLatitude,myLongitude）

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

functioninitialize（）{

varmap=newGMap2（document.getElementById（"map_canvas"））;

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

//Add10markerstothemapatrandomlocations

varbounds=map.getBounds（）;

varsouthWest=bounds.getSouthWest（）;

varnorthEast=bounds.getNorthEast（）;

varlngSpan=northEast.lng（）-southWest.lng（）;

varlatSpan=northEast.lat（）-southWest.lat（）;

for（vari=0;i<10;i++）{

varpoint=newGLatLng（southWest.lat（）+latSpan*Math.random（）,

southWest.lng（）+lngSpan*Math.random（））;

map.addOverlay（newGMarker（point））;

}

}

3.8.地图属性

∙G_NORMAL_MAP-默认视图

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

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

∙G_DEFAULT_MAP_TYPES-这三个类型的数组，在需要重复处理的情况下非常有用

可以使用GMap2对象的setMapType（）方法设置地图类型。

例如，下面的代码将地图设置为使用Google地球的卫星视图：

varmap=newGMap2（document.getElementById（"map_canvas"））;

map.setMapType（G_SATELLITE_MAP）;

地图还包含对了解情况非常有用的大量属性。

例如，要了解当前视口的尺寸，可使用GMap2对象的getBounds（）方法来返回GLatLngBounds值。

每个地图还包含一个“缩放级别”，用于定义当前视图的分辨率。

在普通地图视图内，可以使用0（最低缩放级别，在地图上可以看到整个世界）到19（最高缩放级别，可以看到独立建筑物）之间的缩放级别。

缩放级别因所查看地区而异，因为地球上某些地区的数据比其他地区更详细。

在卫星视图中可以使用多达20个缩放级别。

可以通过使用GMap2对象的getZoom（）方法检索地图当前使用的缩放级别。

3.9.地图交互

您还可以通过编程与地图交互。

GMap2对象支持可以直接改变地图状态的大量方法。

例如，setCenter（）、panTo和zoomIn（）方法通过编程来操作地图，而不是通过用户交互来操作地图。

下面的示例显示一个地图，等待两秒钟，然后平移到新中心点。

panTo方法将地图中心设置在指定点处。

如果指定点位于地图的可见部分，则地图会平稳地平移到该点，否则会跳至该点。

varmap=newGMap2（document.getElementById（"map_canvas"））;

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

window.setTimeout（function（）{

map.panTo（newGLatLng（39.927,116.407））;

},1000）;

3.A.信息窗口

GMap2对象提供了openInfoWindow（）方法，该方法将一个点和一个HTMLDOM元素作为参数。

HTMLDOM元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。

GMap2的openInfoWindowHtml（）方法相似，但是它使用HTML字符串作为其第二个参数而不是DOM元素。

要创建信息窗口，请调用openInfoWindow方法，并向其传递位置和要显示的DOM元素。

下面的示例代码显示了一个信息窗口，该窗口锚定在地图中心，内容为一条简单消息“Hello,world”。

varmap=newGMap2（document.getElementById（"map_canvas"））;

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

map.openInfoWindow（map.getCenter（）,document.createTextNode（"Hello,world"））;

4.事件

4.1.事件监听器

通过使用GEvent命名空间中的实用工具函数注册事件监听器，来处理Google地图API中的事件。

每个地图API对象都导出大量已命名的事件。

例如，GMap2对象导出click、dblclick和move事件，以及其他许多事件。

每个事件都在指定的环境下发生，并且可以传递标识环境的参数。

例如，当用户在地图对象中移动鼠标时，会触发mousemove事件，并且该事件会传递鼠标所在地理位置的GLatLng。

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

注册用来获取这些事件的相关通知的监听器，请使用静态方法GEvent.addListener（）。

该方法有三个参数，一个对象，一个待监听事件以及一个在指定事件发生时调用的函数。

例如，每当用户点击地图时,下面的代码段都会显示警告:

varmap=newGMap2（document.getElementById（"map"））;

GEvent.addListener（map,"moveend",function（）{

varcenter=map.getCenter（）;

document.getElementById（"message"）.innerHTML=center.toString（）;

}）;

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

4.2.将事件绑定到对象

当您希望将事件监听器附加到对象的特定实例时，函数非常有用。

如果您不希望这样，而是希望响应事件时对象的所有实例都调用某方法，可以使用GEvent.bind（）。

在下面的示例中，MyApplication的实例将地图事件与其成员方法绑定在一起，当触发事件时会修改类状态：

functionMyApplication（）{

this.counter=0;

this.map=newGMap2（document.getElementById（"map"））;

this.map.setCenter（newGLatLng（39.9493,116.3975）,13）;

GEvent.bind（this.map,"click",this,this.onMapClick）;

}

MyApplication.prototype.onMapClick=function（）{

this.counter++;

alert（"这是您第"+this.counter+""+

"次点击"

}

varapplication=newMyApplication（）;

4.3.监听DOM事件

Google地图API事件模型创建并管理自己的自定义事件。

但是，DOM也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。

如果您希望捕获并响应这些事件，Google地图API提供的独立于浏览器的包装器可以监听和绑定DOM事件而不需要自定义代码。

GEvent.addDomListener（）静态方法为DOM节点上的DOM事件注册事件处理程序。

同样，GEvent.bindDom（）静态方法允许您为类实例上的DOM事件注册事件处理程序。

4.4.删除事件监听器

不再需要事件监听器时，应将其删除。

甚至在事件只需触发一次的情况下，也可能需要删除。

删除闭包内的匿名函数所定义的事件监听器可能很困难。

但是，addListener（）、addDomListener（）、bind（）和bindDom（）函数会返回GEventListener句柄，可用来最终取消注册处理程序。

下面的示例通过在地图上放置标记来响应点击。

任何后续点击都可删除事件监听器。

请注意，这会导致不再执行removeOverlay（）代码。

另请注意，您甚至可以从事件监听器自身内部删除事件监听器。

functionMyApplication（）{

this.counter=0;

this.map=newGMap2（document.getElementById（"map"））;

this.map.setCenter（newGLatLng（39.9493,116.3975）,13）;

varmyEventListener=GEvent.bind（this.map,"click",this,function（overlay,latlng）{

if（this.counter==0）{

if（latlng）{

this.map.addOverlay（newGMarker（latlng））

this.counter++;

}elseif（overlayinstanceofGMarker）{

this.removeOverlay（marker）

}

}else{

GEvent.removeListener（myEventListener）;

}

}）;

}

functionload（）{

varapplication=newMyApplication（）;

}

5.控件

5.1.向地图添加控件

可以使用GMap2方法addControl（）向地图添加控件。

例如，要将Google地图上显示的平移/缩放控件添加到您的地图中，您可以在您的地图初始化代码中添加下面这行语句：

map.addControl（newGLargeMapControl（））;

可以向地图添加多个控件。

在本例中，我们添加内置GSmallMapControl和GMapTypeControl控件，它们分别可以平移/缩放地图以及切换“地图”与“卫星”这两种类型。

在地图中添加标准控件后，它们即刻完全生效。

varmap=newGMap2（document.getElementById（"map"））;

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

5.2.在地图上放置控件

addControl方法有第二个可选的参数GControlPosition，可用于指定控件在地图上的位置。

它可以是以下值之一，这些值分别指定要放置控件的地图某个角：

∙G_ANCHOR_TOP_RIGHT

∙G_ANCHOR_TOP_LEFT

∙G_ANCHOR_BOTTOM_RIGHT

∙G_ANCHOR_BOTTOM_LEFT

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

GControlPosition还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。

这些偏移量使用GSize对象指定。

本示例会将GMapTypeControl添加到地图的右上角，填充为10个像素。

双击地图上的任何位置可以删除该控件，将其放在地图的右下角。

varmap=newGMap2（document.getElementById"map_canvas"））;

varmapTypeControl=newGMapTypeControl（）;

vartopRight=newGControlPosition（G_ANCHOR_TOP_RIGHT,newGSize（10,10））;

varbottomRight=newGControlPosition（G_ANCHOR_BOTTOM_RIGHT,newGSize（10,10））;

map.addControl（mapTypeControl,topRight）;

GEvent.addListener（map,"dblclick",function（）{

map.removeControl（mapTypeControl）;

map.addControl（newGMapTypeControl（）,bottomRight）;

}）;

map.addControl（newGSmallMapControl（））;

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

5.3.自定义地图控件

Google地图API还允许您通过子类化GControl来创建自定义地图控件。

（您并没有在JavaScript中实现一个“子类化”对象，而是把这个对象的prototype指定为GControl对象的实例。

）

要创建可用的自定义控件，您需要实现在该类中定义的至少两个方法：

initialize（）和getDefaultPosition（）。

initialize（）方法必须返回DOM元素，而getDefaultPosition（）方法必须返回类型为GControlPosition的对象。

所有自定义的地图控件中的DOM元素最终都应该添加到地图容器（也是DOM元素）中去，这个地图容器可以通过GMap2getContainer（）方法获得。

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

//一个TextualZoomControl是GControl显示“放大”的文本//和“缩小”按钮（而不是//谷歌地图中所使用的标志性按钮）

//首先定义的函数

functionTextualZoomControl（）{

}

//子类”的GControl，我们设置的原型对象//GControl对象的一个实例

TextualZoomControl.prototype=newGControl（）;

//为每个按钮创建一个DIV和它们放置在一个容器//DIV这是作为我们的控制元素返回。

我们的地图容器//添加到//控制和正确返回//位置的地图类元素。

。

TextualZoomControl.prototype.initialize=function（map）{

varcontainer=document.createElement（"div"）;

varzoomInDiv=docum