google maps api 中文同步文档.docx

您可以下载这个例子修改并测试，但是您必须用您自己的APIkey代替文件中Key。

（如果您注册了某个目录的APIKey，那么您可以直接在这个目录的任何子目录下使用。

下面例子里面的地址（Key。

如果您的APIKey是"abcdefg"，那么您的script标记看起来应该是这样的：

type="text/javascript">

描绘地图的类是GMap2。

这个类在页面上显示一个地图。

您可以创建任意多个该类的实例（一个实例就是页面上的一个地图）。

创建了地图实例之后，就可以指定一个页面元素（通常是div元素）来包含它。

除非您明确的指定地图的尺寸，否则地图大小会取决于容器的尺寸。

浏览器兼容性

GoogleMapsAPI支持的浏览器种类与Google地图网站相同。

因为不同的应用程序在遇到不兼容的浏览器的时候需要表现不同的行为，所以MapsAPI提供了一个全局方法（GBrowserIsCompatible（））来检查兼容性，但是，发现一个不兼容的浏览器时，它不会自动采取任何措施。

文档中的例子都不会检查浏览器兼容性（除了上面的那第一个例子），他们在老的浏览器上面也不会显示错误信息。

很明显真实的应用程序应该在遇到不兼容浏览器的时候最好做点什么以表现得更加友好，而为了让范例代码更好看（易懂），我们省略了这种检查。

非凡的应用总是会遇到浏览器和平台兼容性的问题。

这种问题没有任何简单的解决方案，但是GoogleMapsAPI讨论组和quirksmode.org应该可以找到些好的信息。

XHTML和VML

我们推荐您使用标准兼容的XHTML页面包含地图。

当浏览器看到页面顶端的DOCTYPE，他们会用"标准兼容模式"来渲染页面，这样页面布局和行为在浏览器里的效果更有预见性。

如果您想在地图里面显示折线，您需要在您的XHTML文档里面包含VML命名空间和一些CSS代码，这样可以令它们在IE下面可以正常工作。

XHTM文档的开头看起来就像这样：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml"xmlns:

v="urn:

schemas-microsoft-com:

vml">

v\:

*{

behavior:

url（#default#VML）;

}

type="text/javascript">

API升级

地址Code和MapsAPI讨论组发布相关信息。

一个新版本正式发布以后，我们会让新旧版本并行运行一个月。

一个月以后，老版本会被关闭，而使用旧版本的代码将不能继续工作。

MapsAPI开发团队透明的升级API进行的Bug修正和性能改进。

这些Bug修正应该仅仅提高性能和修正Bug，但是我们可能会不经意的影响一些API用户的使用。

请利用MapsAPI讨论组来报告这些问题。

地理译码/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秒，然后平移到一个新的中心点.

panTo方法把地图的中心移动到一个指定点。

如果指定点在地图的可见区域内，地图中心会平滑地平移到指定点，否则地图中心会直接跳到那个点。

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把这个图层和这个地图类型联系在一起。

//definethecrosshairtilelayeranditsrequiredfunctions

varcrossLayer=newGTileLayer（newGCopyrightCollection（""）,0,15）;

crossLayer.getTileUrl= function（tile,zoom）{

 return"./include/tile_crosshairs.png";

}

crossLayer.isPng=function（）{returntrue;}

//Createanewmaptypeincorporatingthetilelayer

varlayerTerCross=[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=newGHierarchicalMapTypeControl（）;

//Setupmaptypemenurelationships

mapControl.clearRelationships（）;

mapControl.addRelationship（G_SATELLITE_MAP,G_HYBRID_MAP,"Labels",false）;

mapControl.addRelationship（G_PHYSICAL_MAP,mtTerCross,"Crosshairs"）;

//Addcontrolafteryou'vespecifiedtherelationships

map.addControl（mapControl）;

map.addControl（newGLargeMapControl（））;

Viewexample（control-initialization.html）

事件监听器

要注册一个事件监听器需要调用GEvent.addListener方法。

把一个地图，一个需要监听的事件，一个事件发生时需要调用的函数传给GEvent.addListener方法。

在下面的例子里，在我们托动地图后，显示地图中心的经纬度。

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

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

varcenter=map.getCenter（）;

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

}）;

map.setCenter（newGLatLng（37.4419,-122.1419）,13）;

显示范例（event.html）

想得到更多事件的信息，参看Events纵览。

想得到GMap2对象的完整事件列表，参看GMap2.Events.

打开信息窗口

要创建一个信息窗口，调用openInfoWindow方法，传递给它一个位置和一个用来显示的DOM元素。

下面的例子在地图中心显示一个包含"Hello,world"信息的窗口。

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

map.setCenter（newGLatLng（37.4419,-122.1419）,13）;

map.openInfoWindow（map.getCenter（）,

document.createTextNode（"Hello,world"））;

显示范例（infowindow.html）

地图覆盖物

这个例子在地图上显示10个位置随机的标记和一个5个点连成的折线。

如果不指定其他的图标，GMarker类会使用缺省的Google地图图标。

自定义图标的例子请参看创建图标。

记得您必须在HTML文档里面包含VML命名空间和CSS以使您的网页能在IE下显示折线。

更多的信息参看XHTML和VML。

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

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.setCenter（newGLatLng（37.4419,-122.1419）,13）;

//Add10markersinrandomlocationsonthemap

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

}

//Addapolylinewithfiverandompoints.Sortthepointsby

//longitudesothatthelinedoesnotintersectitself.

varpoints=[];

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

points.push（newGLatLng（southWest.lat（）+latSpan*Math.random（）,

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

}

points.sort（function（p1,p2）{

returnp1.lng（）-p2.lng（）;

}）;

map.addOverlay（newGPolyline（points））;

显示范例（overlay.html）

点击事件处理

要在用户点击地图的时候触发一个动作，就需要在您的GMap2实例上注册一个"click"事件的监听器。

当事件被触发的时候，事件处理句柄将收到两个参数：

被点击的标记（如果有），被点击点的GLatLng（经纬度）。

如果没有标记被点击，那么第一个参数为null。

注意：

标记是唯一支持"click"事件的内建覆盖对象。

其他类型的覆盖对象，如GPolyline是不能被点击的。

在下面的例子里，当访客点击在地图上一个没有标记的点上时，我们在这个点上创建一个标记。

当访客点击在一个标记上的时候，我们把它删除。

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

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.setCenter（newGLatLng（37.4419,-122.1419）,13）;

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

if（marker）{

map.removeOverlay（marker）;

}else{

map.addOverlay（newGMarker（point））;

}

}）;

显示范例（click.html）

想得到更多事件的信息，参看Events纵览。

想得到GMap2对象的完整事件列表，参看GMap2.Events.

在标记上显示信息窗口

在这个例子里，我们通过监听每一个标记来在他们上面显示定制的信息窗口。

借助Javascript函数闭包（closure）技术，我们可以定制每个标记的信息窗口的内容。

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

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.setCenter（newGLatLng（37.4419,-122.1419）,13）;

//Createsamarkeratthegivenpointwiththegivennumberlabel

functioncreateMarker（point,number）{

varmarker=newGMarker（point）;

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

marker.openInfoWindowHtml（"Marker#"+number+""）;

}）;

returnmarker;

}

//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（createMarker（point,i+1））;

}

显示范例（markerinfowindow.html）

想得到更多事件的信息，参看Events纵览。

想得到GMap2对象的完整事件列表，参看GMap2.Events.

分页信息窗口

API版本2引入了openInfoWindowTabs（）方法和GInfoWindowTab类用来支持信息窗口拥有多个命名的分页。

下面的例子在一个标记上显示了一个简单的分页信息窗口。

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

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.setCenter（newGLatLng（37.4419,-122.1419）,13）;

//Ourinfowindowcontent

varinfoTabs=[

newGInfoWindowTab（"Tab#1","Thisistab#1content"）,

newGInfoWindowTab（"Tab#2","Thisistab#2content"）

];

//Placeamarkerinthecenterofthemapandopentheinfowindow

//automatically

varmarker=newGMarker（map.getCenter（））;

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

marker.openInfoWindowTabsHtml（infoTabs）;

}）