Google Maps API 2 文档

1GoogleGoogleGoogleGoogleMapsMapsMapsMapsAPIAPIAPIAPI2222文档读者本文档适用于熟悉JavaScript和面向对象编程概念的人。另外您也应该很熟悉Google地图这个产品。网上有很多JavaScript指南可供参考。简介GoogleGoogleGoogleGoogleMapsMapsMapsMaps上的HelloHelloHelloHelloWorldWorldWorldWorld学习这个API最简单的方法就是看一个简单的例子。下面的网页显示一个500x300的地图，中心位于California，PaloAlto：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN==content-typecontent=text/html;charset=utf-8/titleGoogleMapsJavaScriptAPIExample/titlescriptsrc==api&v=2&key=abcdefgtype=text/javascript/scriptscripttype=text/javascript//![CDATA[functionload(){if(GBrowserIsCompatible()){varmap=newGMap2(document.getElementById(map));map.setCenter(newGLatLng(37.4419,-122.1419),13);2}}//]]/script/headbodyonload=load()onunload=GUnload()divid=mapstyle=width:500px;height:300px/div/body/html您可以下载这个例子修改并测试，但是您必须用您自己的APIkey代替文件中Key。(如果您注册了某个目录的APIKey，那么您可以直接在这个目录的任何子目录下使用。下面例子里面的地址(=api&v=2)是在您的页面放置Google地图需要的所有的代码的JavaScript文件。您的页面必须包含指向这个地址的script标记，并加上您的APIKey。如果您的APIKey是abcdefg，那么您的script标记看起来应该是这样的：scriptsrc==api&v=2&key=abcdefgtype=text/javascript/script描绘地图的类是GMap2。这个类在页面上显示一个地图。您可以创建任意多个该类的实例（一个实例就是页面上的一个地图）。创建了地图实例之后，就可以指定一个页面元素(通常是div元素)来包含它。除非您明确的指定地图的尺寸，否则地图大小会取决于容器的尺寸。浏览器兼容性GoogleMapsAPI支持的浏览器种类与Google地图网站相同。因为不同的应用程序在遇到不兼容的浏览器的时候需要表现不同的行为，所以MapsAPI提供了一个全局方法(GBrowserIsCompatible())来检查兼容性，但是，发现一个不兼容的浏览器时，它不会自动采取任何措施。=api&v=2里面的脚本几乎可以在任何浏览器里面解析而不产生错误，所以您可以在检查浏览器兼容性之前就包含脚本文件。3文档中的例子都不会检查浏览器兼容性(除了上面的那第一个例子)，他们在老的浏览器上面也不会显示错误信息。很明显真实的应用程序应该在遇到不兼容浏览器的时候最好做点什么以表现得更加友好，而为了让范例代码更好看（易懂），我们省略了这种检查。非凡的应用总是会遇到浏览器和平台兼容性的问题。这种问题没有任何简单的解决方案，但是GoogleMapsAPI讨论组和quirksmode.org应该可以找到些好的信息。XHTMLXHTMLXHTMLXHTML和VMLVMLVMLVML我们推荐您使用标准兼容的XHTML页面包含地图。当浏览器看到页面顶端的DOCTYPE，他们会用标准兼容模式来渲染页面，这样页面布局和行为在浏览器里的效果更有预见性。如果您想在地图里面显示折线，您需要在您的XHTML文档里面包含VML命名空间和一些CSS代码，这样可以令它们在IE下面可以正常工作。XHTM文档的开头看起来就像这样：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN=:v=urn:schemas-microsoft-com:vmlxmlns:v=urn:schemas-microsoft-com:vmlxmlns:v=urn:schemas-microsoft-com:vmlxmlns:v=urn:schemas-microsoft-com:vmlheadmetahttp-equiv=content-typecontent=text/html;charset=UTF-8/titleMyGoogleMapsHack/titlestyletype=text/cssv\:*v\:*v\:*v\:*{{{{behavior:url(#default#VML);behavior:url(#default#VML);behavior:url(#default#VML);behavior:url(#default#VML);}}}}/stylescriptsrc==api&v=2&key=abcdefgtype=text/javascript/script/headAPIAPIAPIAPI升级地址=api&v=2中的v=2部分表明API的版本是2。当我们对4API进行重大升级的时候，我们会改变版本号并在GoogleCode和MapsAPI讨论组发布相关信息。一个新版本正式发布以后，我们会让新旧版本并行运行一个月。一个月以后，老版本会被关闭，而使用旧版本的代码将不能继续工作。MapsAPI开发团队透明的升级API进行的Bug修正和性能改进。这些Bug修正应该仅仅提高性能和修正Bug，但是我们可能会不经意的影响一些API用户的使用。请利用MapsAPI讨论组来报告这些问题。地理译码/Geocoding/Geocoding/Geocoding/Geocoding地理译码是把地址(如1600AmphitheatreParkway,MountainView,CA)转换为地理坐标(如经度-122.083739，纬度37.423021)的流程，您可以用它把数据库里面的街道地址或用户提供的地址信息标记在地图上。GoogleMapsAPI包含了可以通过HTTP请求和JavaScript来访问的地理译码器。译注：到目前为止，这个地理译码器还没有足够的中国的本地化信息可以使用。行程规划和本地搜索现在GoogleMapsAPI不包含任何行程规划服务.然而现在Web上有很多免费的行程规划API。如果您希望为您的网站增加本地搜索能力，您可以使用GoogleAJAX搜索API来在您的网站上嵌入一个本地搜索模块。地图范例下面的例子仅会显示主体相关的JavaScript代码，而不是完整的HTML文件。您可以把JavaScript代码嵌入到前面的骨架HTML文件，或者您可以直接下载每个例子下面的链接所引用的HTML文件。基础下面的例子创建一个地图并定位到PaloAlto,California。varmap=newGMap2(document.getElementById(map));map.setCenter(newGLatLng(37.4419,-122.1419),13);显示范例(simple.html)地图移动和动画下面的例子显示一个地图，然后等待2秒，然后平移到一个新的中心点.5panTo方法把地图的中心移动到一个指定点。如果指定点在地图的可见区域内，地图中心会平滑地平移到指定点，否则地图中心会直接跳到那个点。varmap=newGMap2(document.getElementById(map));map.setCenter(newGLatLng(37.4419,-122.1419),13);window.setTimeout(function(){map.panTo(newGLatLng(37.4569,-122.1569));},1000);显示范例(animate.html)在地图上添加控件您可以用addControl方法在地图上添加控件。在这个例子里，我们加入GSmallMapControl和GMapTypeControl控件，这样我们分别可以移动/缩放地图以及在地图和卫星模式之间切换。varmap=newGMap2(document.getElementById(map));map.addControl(newGSmallMapControl());map.addControl(newGMapTypeControl());map.setCenter(newGLatLng(37.4419,-122.1419),13);显示范例(controls.html)控件初始化大多数GoogleMapsAPI的控件提供带有标准行为的简单控件。然而，有些控件需要特殊的初始化。例如，GHierarchicalMapTypeControl需要额外的初始化来保证菜单中的地图类型顺序正确。例子中加入了地图类型G_PHYSICAL_MAP，一个交叉线的图层，然后创建了一个GHierarchicalMapTypeControl把这个图层和这个地图类型联系在一起。//definethecrosshairtilelayeranditsrequiredfunctionsvarcrossLayer=newGTileLayer(newGCopyrightCollection(),0,15);crossLayer.getTileUrl=function(tile,zoom){return./include/tile_crosshairs.png;}6crossLayer.isPng=function(){returntrue;}//CreateanewmaptypeincorporatingthetilelayervarlayerTerCross=[G_PHYSICAL_MAP.getTileLayers()[0],crossLayer];varmtTerCross=newGMapType(layerTerCross,G_PHYSICAL_MAP.getProjection(),Ter+);varmap=newGMap2(document.getElementById(map_canvas),{size:newGSize(640,320)});map.addMapType(G_PHYSICAL_MAP);map.addMapType(mtTerCross);map.setCenter(newGLatLng(37.4419,-122.1419),4);varmapControl=newGHierarch