Google Maps API 说明.docx

//

[CDATA[

if（GBrowserIsCompatible（））{

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

}

//]]>

你可以点这儿预览这个例子的效果，不过在你上传到自己的网站上运行之前，你必须把其中的"&key="之后的授权码换成自己在MapsAPIkey申请的授权码，否则看不到效果.本网站使用的范例中的授权码只能在S域名上使用。

你可以看到，GoogleMaps使用了一个JavaScript文件（这个文件包含了你在自己的网页上显示Google地图的所有的函数和类.想要在自己的网页上使用GoogleMapsAPI，你必须在网页上通过script标签连接一个包含你申请的授权码的URL:

GoogleMapsAPI提供的最重要的类是GMap,它代表页面上的地图对象，你可以根据需要在页面上使用多个GMap的实例每个地图被包含在一个HTML的容器（container）里面，比如DIV标签.

下面会讲到如何给地图实例添加和操作标注.

浏览器兼容性

GoogleMaps并不是对每一个浏览器都兼容的，GoogleMaps现在兼容Firefox/Mozilla,IE5.5+,Safari1.2+和Opera，不支持IE5.0.因为每个不兼容的浏览器的动作又是不同的，所以MapsAPI提供了一个全局的方法（GBrowserIsCompatible（））来检查浏览器兼容性，但是并不自动检查.引入的脚本所以你可以放心的在检查浏览器兼容性之前引入该脚本.

在本文的所有例子之中，除了上面的一篇之外，其他的既没有用GBrowserIsCompatible（）检查浏览器兼容性，也没有给出任何错误信息正式使用的程序上应该有更加友好的处理方法，这里为了让这些例子更加易懂，而忽略了浏览器检查.

XHTML和VML

建议你在需要使用地图的网页上使用标准的兼容性好的XHTML,当页面顶端存在DOCTYPE标签时，浏览器会使用"标准兼容模式"来处理页面，这将使页面能更好的跨越浏览器执行.

同样，如果你需要在地图上包含折线，你需要为IE浏览器在页面上引入VML命名空间这样，你的文档开头就应该是这样的：

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

}

关于VML，你可以在Microsoft'sVMLworkshop查找更多信息.

API更新

引入的JavaScript文件URLAPI的"版本1"，如果API出现了重要的升级，会增加这个版本号并且在GoogleCode和MapsAPI讨论组上面发布公告.

Google会同时运行新版和旧版一个月左右，随后旧版就会被关闭.

地图工作小组会在修复BUG或改善性能之后随时更新API，这些更新仅仅是为了改善性能和修复错误，不过在这个工程之中也可能发生影响API连接的情况如果这样的事情发生，你可以到MapsAPIdiscussiongroup报告你遇到的情况

地理、行程和其他

GoogleMapsAPI现在并不包含地理和行程服务,可在网上有许多关于freeGoogleEarthocoders的相关内容.

应用范例

一个简单例子

创建一个在所在层中居中的地图

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

查看范例（simple.html）

地图的移动和变换

recenterOrPanToLatLng方法进行一个地图变换，目标点经/纬在当前视口之中时执行一个连续的动作，否则，执行不连续的变换动作

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.centerAndZoom（newGPoint（-122.1419,37.4419）,4）;

window.setTimeout（function（）{

map.recenterOrPanToLatLng（newGPoint（-122.1569,37.4569））;

},2000）;

查看范例（animate.html）

在地图上添加控件

addControl方法可以在地图上添加控件，并且集成了GSmallMapControl（用来缩放和移动图片）和GMapTypeControl（用来在地图和卫星图模式间切换）两个控件.

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

查看范例（controls.html）

事件监视

GoogleEarthvent.addListener用来注册事件监视器，在这个例子中，在用户移动或拖拽地图后，输出地图中心点的经/纬.

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

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

varcenter=map.GoogleEarthtCenterLatLng（）;

varlatLngStr='（'+center.y+','+center.x+'）';

document.GoogleEarthtElementById（"messaGoogleEarth"）.innerHTML=latLngStr;

}）;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

查看范例（event.html）

显示信息浮窗

这个范例显示一个指向地图中心点的"Helloworld"信息浮窗，这里信息浮窗显示在指向点的上面，而实际上，信息窗能在地图的任何地方显示.

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

map.openInfoWindow（map.GoogleEarthtCenterLatLng（）,

document.createTextNode（"Helloworld"））;

查看范例（infowindow.html）

地图标注

本范例通过创建10个随机的标注和折线来说明地图标注的用法.

//CenterthemaponPaloAlto

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

//Add10randommarkersinthemapviewportusingthedefaulticon

varbounds=map.GoogleEarthtBoundsLatLng（）;

varwidth=bounds.maxX-bounds.minX;

varheight=bounds.maxY-bounds.minY;

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

varpoint=newGPoint（bounds.minX+width*Math.random（）,

bounds.minY+height*Math.random（））;

varmarker=newGMarker（point）;

map.addOverlay（marker）;

}

//Addapolylinewith4randompoints.Sortthepointsbylongitudesothat

//thelinedoesnotintersectitself.

varpoints=[];

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

points.push（newGPoint（bounds.minX+width*Math.random（）,

bounds.minY+height*Math.random（）））;

}

points.sort（function（p1,p2）{returnp1.x-p2.x;}）;

map.addOverlay（newGPolyline（points））;

查看范例（overlay.html）

响应用户点击

本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记.

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

GoogleEarthvent.addListener（map,'click',function（overlay,point）{

if（overlay）{

map.removeOverlay（overlay）;

}elseif（point）{

map.addOverlay（newGMarker（point））;

}

}）;

查看范例（click.html）

在标记上显示信息浮窗

在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.

//CenterthemaponPaloAlto

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

//Createsamarkerwhoseinfowindowdisplaysthegivennumber

functioncreateMarker（point,number）{

varmarker=newGMarker（point）;

//Showthismarker'sindexintheinfowindowwhenitisclicked

varhtml="Marker#"+number+"";

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

marker.openInfoWindowHtml（html）;

}）;

returnmarker;

}

//Add10randommarkersinthemapviewport

varbounds=map.GoogleEarthtBoundsLatLng（）;

varwidth=bounds.maxX-bounds.minX;

varheight=bounds.maxY-bounds.minY;

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

varpoint=newGPoint（bounds.minX+width*Math.random（）,

bounds.minY+height*Math.random（））;

varmarker=createMarker（point,i+1）;

map.addOverlay（marker）;

}

查看范例（markerinfowindow.html）

创建图标

创建一种新图标,就像在GoogleRideFinder上面使用的迷你标记一样.必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.

//Createour"tiny"markericon

varicon=newGIcon（）;

icon.imaGoogleEarth="Earths/mm_20_red.png";

icon.shadow="Earths/mm_20_shadow.png";

icon.iconSize=newGSize（12,20）;

icon.shadowSize=newGSize（22,20）;

icon.iconAnchor=newGPoint（6,20）;

icon.infoWindowAnchor=newGPoint（5,1）;

//CenterthemaponPaloAlto

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

//Createsoneofourtinymarkersatthegivenpoint

functioncreateMarker（point）{

varmarker=newGMarker（point,icon）;

map.addOverlay（marker）;

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

marker.openInfoWindowHtml（"Youclickedme!

"）;

}）;

}

//Placetheiconsrandomlyinthemapviewport

varbounds=map.GoogleEarthtBoundsLatLng（）;

varwidth=bounds.maxX-bounds.minX;

varheight=bounds.maxY-bounds.minY;

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

createMarker（newGPoint（bounds.minX+width*Math.random（）,

bounds.minY+height*Math.random（）））;

}

查看范例（icon.html）

使用图标类

多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用GIcon类的copy方法来构造.这样可以将一个Icon对象的所有属性复制到一个新的Icon对象中.

//Createabaseiconforallofourmarkersthatspecifiestheshadow,icon

//dimensions,etc.

varbaseIcon=newGIcon（）;

baseIcon.shadow="

baseIcon.iconSize=newGSize（20,34）;

baseIcon.shadowSize=newGSize（37,34）;

baseIcon.iconAnchor=newGPoint（9,34）;

baseIcon.infoWindowAnchor=newGPoint（9,2）;

baseIcon.infoShadowAnchor=newGPoint（18,25）;

//CenterthemaponPaloAlto

varmap=newGMap（document.GoogleEarthtElementById（"map"））;

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

map.centerAndZoom（newGPoint（-122.141944,37.441944）,4）;

//Createsamarkerwhoseinfowindowdisplaysthelettercorrespondingto

//thegivenindex

functioncreateMarker（point,index）{

//Createaletterediconforthispointusingouriconclassfromabove

varletter=String.fromCharCode（"A".charCodeAt（0）+index）;

varicon=newGIcon（baseIcon）;

icon.im