Google地图API教程

开发人员指南地图基础知识简介Google地图的“Hello,World”加载Google地图API地图DOM元素GMap2-基本对象初始化地图加载地图经度和纬度地图属性地图交互信息窗口简介任何Google地图API应用程序中的基础元素都是“地图”本身。本文档讨论GMap2基础对象的用法和地图操作的基础知识。Google地图的“Hello,World”开始学习Google地图API最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的500x300的地图。!DOCTYPEhtml-//W3C//DTDXHTML1.0Strict//EN==content-typecontent=text/html;charset=utf-8/titleGoogleMapsJavaScriptAPIExample/titlescriptsrc==api&v=2&key=abcdefg&sensor=true_or_falsetype=text/javascript/scriptscripttype=text/javascriptfunctioninitialize(){if(GBrowserIsCompatible()){varmap=newGMap2(document.getElementById(map_canvas));map.setCenter(newGLatLng(39.9493,116.3975),13);}}/script/headbodyonload=initialize()onunload=GUnload()divid=map_canvasstyle=width:500px;height:300px/div/body/html您可以查看此示例及下载、编辑和调试该示例，但必须将该文件中的密钥替换为您自己的Google地图API密钥。（如果注册了特定目录的密钥，也可以将其用于所有子目录。）即使在此简单的示例中，也需要注意五点：使用script标签包含Google地图APIJavaScript。创建名为“map_canvas”的div元素来包含地图。编写JavaScript函数创建“map”对象。将地图的中心设置为指定的地理点。从body标签的onLoad事件初始化地图对象。下面说明了这些步骤。加载Google地图APIscriptsrc==api&v=2&key=abcdefg&sensor=true_or_falsetype=text/javascript/script=api&v=2&key=abcdefg网址指向包含使用Google地图API所需所有符号和定义的JavaScript文件的位置。您的页面必须包含指向此网址的script标签，使用注册API时收到的密钥。在此示例中，该密钥显示为“abcdefg”。请注意，我们也传递sensor参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中，我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为true或false。地图DOM元素divid=map_canvasstyle=width:500px;height:300px/div要让地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为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坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。加载地图bodyonload=initialize()onunload=GUnload()当HTML页面显示时，文档对象模型(DOM)即会扩展，接收其他外部图像和脚本并将其合并到document对象中。为确保我们的地图仅放置在完全加载后的页面上，我们仅在HTML页面的body元素收到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);//Add10markerstothemapatrandomlocationsvarbounds=map.getBounds();varsouthWest=bounds.getSouthWest();varnorthEast=bounds.getNorthEast();varlngSpan=northEast.lng()-southWest.lng();varlatSpan=northEast.lat()-southWest.lat();for(vari=0;i10;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(3