收藏

下载资源 加入VIP,免费下载

第1页 / 共72页

第2页 / 共72页

第3页 / 共72页

第4页 / 共72页

第5页 / 共72页

要让地图在网页上显示，必须为其留出一个位置。

通常，我们通过创建名为div的元素并在浏览器的文档对象模型（DOM）中获取此元素的引用执行此操作。

在上述示例中，我们定义名为“map_canvas”的div，并使用样式属性设置其尺寸。

地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的GMapOptions显式地为地图指定尺寸。

GMap2-基本对象

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

GMap2类是表示地图的JavaScript类。

此类的对象在页面上定义单个地图。

（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。

）我们使用JavaScriptnew操作符创建此类的一个新实例。

当创建新的地图实例时，在页面中指定一个DOM节点（通常是div元素）作为地图的容器。

HTML节点是JavaScriptdocument对象的子对象，而且我们通过document.getElementById（）方法获得该元素的引用。

此代码定义了一个变量（名为map），并将新GMap2对象赋值给该变量。

函数GMap2（）称为“构造函数”，其定义（在Google地图API参考中简述）如下所示：

构造函数

说明

GMap2（container,opts?

）

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

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

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

初始化地图

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

通过GMap2构造函数创建地图后，我们需要再做一件事：

将其初始化。

初始化通过地图的setCenter（）方法完成。

setCenter（）方法要求有GLatLng坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。

加载地图

当HTML页面显示时，文档对象模型（DOM）即会扩展，接收其他外部图像和脚本并将其合并到document对象中。

为确保我们的地图仅放置在完全加载后的页面上，我们仅在HTML页面的元素收到onload事件后才执行构造GMap2对象的函数。

这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。

onload属性是事件处理程序的示例。

Google地图API还提供了大量事件可以用来“监听”状态变化。

请参阅地图事件和事件监听器以了解更多信息。

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

经度和纬度

既然现在已经有地图了，我们还需要一种方法来引用地图上的位置。

在Google地图API中，GLatLng对象提供了此类机制。

可以构造一个GLatLng对象，按照制图学的惯例以{经度,纬度}的顺序传递参数：

varmyGeographicCoordinates=newGLatLng（myLatitude,myLongitude）

注意：

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

就像它可用于轻松地引用地理点一样，它也可用于定义对象的地理边界。

例如，地图在称为视口的窗口内显示整个世界的当前“窗口”。

此视口可以通过四个角上的矩形点来定义。

GLatLngBounds对象提供了这个功能，通过使用分别表示边界框的西南角和东北角的两个GLatLng对象定义一个矩形区域来实现。

GLatLng对象在Google地图API中用途广泛。

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

下面的示例使用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））;

}

}

查看示例（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地球的卫星视图：

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

map.setMapType（G_SATELLITE_MAP）;

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

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

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

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

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

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

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

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

地图交互

既然现在有了GMap2对象，就可以与之进行交互了。

基本地图对象的外观和行为与您在Google地图网站上交互的地图非常相似，并带有大量内置行为。

GMap2对象还提供了大量配置方法来改变地图对象本身的行为。

默认情况下，和在上一样，地图对象会对用户的活动做出反应。

但您可以使用大量实用工具方法改变此行为。

例如，GMap2.disableDragging（）方法禁止了点击并拖拽地图到新位置的功能。

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

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）;

查看示例（map-animate.html）

可以通过使用Google地图API事件进行更复杂的交互。

信息窗口

所有使用Google地图API的地图都有可能显示类型为GInfoWindow的单个“信息窗口”，该窗口在地图上端以浮动窗口显示HTML内容。

信息窗口有点像漫画书上的文字气球；它有一个内容区域和锥形引线，引线的头在地图的指定点上。

点击Google地图上的标记可以看到活动的信息窗口。

GInfoWindow对象没有构造函数。

当创建地图时，会自动创建一个信息窗口并将其附加到地图上。

对于指定的地图，一次不能显示多个信息窗口，但可以移动信息窗口并可以更改其内容（如果需要）。

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"））;

查看示例（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（）。

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

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

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

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

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

alert（"您点击了地图。

"）;

}）;

查看示例（event-simple.html）

监听器也能够捕获事件的环境。

在下面的示例代码中，显示用户拖动地图后地图中心的经度和纬度。

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）;

查看示例（event-context.html）

在事件监听器中使用闭包

当执行事件监听器时，一个常用的好方法就是将私有数据和持久性数据附加到一个对象。

JavaScript不支持“私有”实例数据，但它却支持闭包，闭包允许内部函数访问外部变量。

在事件监听器中，访问通常不附加到发生事件的对象的变量时，闭包非常有用。

下面的示例在事件监听器中使用函数闭包将加密消息分配给一组标记。

点击每个标记都可以看到加密消息的一部分，该消息并不包含在标记自身内部。

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

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

//Createsamarkeratthegivenpoint

//Thefivemarkersshowasecretmessagewhenclicked

//butthatmessageisnotwithinthemarker'sinstancedata

functioncreateMarker（point,number）{

varmarker=newGMarker（point）;

varmessage=["这","是","个","秘密","消息"];

marker.value=number;

GEvent.addListener（marker,"click",function（）{

varmyHtml="#"+number+"
"+message[number-1];

map.openInfoWindowHtml（point,myHtml）;

}）;

returnmarker;

}

//Add5markerstothemapatrandomlocations

varbounds=map.getBounds（）;

varsouthWest=bounds.getSouthWest（）;

varnorthEast=bounds.getNorthEast（）;

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

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

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

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

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

map.addOverlay（createMarker（point,i+1））;

}

查看示例（event-closure.html）

在事件中使用传递的参数

地图API事件系统中的许多事件在触发事件时都会传递参数。

例如，如果地图点击发生在叠加层上，GMap2“点击”事件会传递overlay和overlaylatlng；否则，它传递地图坐标的latlng。

可以通过将指定的符号直接传递给事件监听器中的函数来访问这些参数。

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

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

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

GEvent.addListener（map,"click",function（overlay,latlng）{

if（latlng）{

varmyHtml="GPoint为:

"+map.fromLatLngToDivPixel（latlng）+",

缩放级别:

"+map.getZoom（）;

map.openInfoWindow（latlng,myHtml）;

}

}）;

map.addControl（newGSmallMapControl（））;//增加控制条

map.addControl（newGMapTypeControl（））;//增加卫星地图和普通地图的显示

查看示例（event-arguments.html）

将事件绑定到对象方法

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

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

在下面的示例中，MyApplication的实例将地图事件与其成