Google 地图 API 文档

ID：37552398

大小：366.25 KB

页数：22页

时间：2019-05-25

上传者：U-2494

资源描述：

《Google 地图 API 文档》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

Google地图API文档第1页Google地图APIGoogleCodeHome>Google地图API>概念与示例Google地图API基本概念Google地图JavaScriptAPI使您能够将Google地图嵌入到自己的网页中。在使用该API之前，您需要先申请一个APIKey，然后按照如下的指南操作。由于API比较新，其中有可能存在一些不足，另外文档也还不够完美。请您多多包涵，我们会不断进行改进。同时，欢迎您加入地图API讨论组给我们反馈，并且讨论关于API的问题。文档是根据英文版的GoogleMapsAPI版本2编写的。有关英文版GoogleMapsAPI2的最新功能，请参见英文版GoogleMapsAPI第2版文档请注意，为了使用中国的地图数据，您需要使用来自ditu.google.com的JavaScript代码。申请APIKey时自动生成的代码缺省指向maps.google.com。因此，您需要手动将其改为ditu.google.com。另外，GoogleMapsAPI2的某些功能目前还不支持中国。关于Google地图API，请您在Google地图API讨论组讨论交流。如果参与英文MapsAPI讨论组，请说明您使用的是中文版Google地图API，以避免误解。目录面向的读者标注管理器示例天气预报图简介“HelloWorld”程序疑难解答浏览器兼容性其它资料XHTML和VMLAPI概览API更新GMap2类地理译码行程规划和本地搜索事件标注管理气泡提示窗口地图覆盖物示例程序控件基本操作XML和RPC地图移动及动画减少浏览器内存泄露给地图添加控件事件处理函数演示程序打开气泡提示窗口类参考地图覆盖物单击事件处理给标注增加气泡提示窗口多页的气泡提示窗口创建图标使用图标类可拖拽的标注http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第2页编码折线在地图中使用XML和异步HTTP通信(AJAX)自定义地图控件自定义地图覆盖物面向的读者本文档适用于熟悉JavaScript以及面向对象编程概念的读者。另外，从用户的角度，您也应该很熟悉Google地图这个产品。如果您遇到困难，网上有很多JavaScript指南可供参考。简介您的第一个Google地图程序："Hello,World"学习这个API最简单的方法就是从一个简单的例子开始。下面的网页显示一个500x300的地图，中心位于北京的故宫博物院Google地图JavaScriptAPI示例//

您可以下载这个例子修改并测试，但是您必须用您自己的APIKey代替文件中Key。（如果您为某个目录注册了APIKey，那么该APIKey也能够在它的任何http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第3页子目录下使用）。上面的例子中，地址http://ditu.google.com/maps?file=api&v=2包含了在您的页面放置Google地图所需要的所有JavaScript代码。您的页面必须包含指向这个地址的script标记，并加上您的APIKey。例如，如果您的APIKey是"abcdefg"，那么您的script标记应该类似这样：表示地图的类是GMap2。这个类代表页面上的单个地图。您可以根据需要创建任意多个该类的实例（一个实例对应页面上的一个地图）。在创建地图实例时，您需要指定一个页面上已命名的元素（通常是div元素）作为地图控件的容器。除非您明确地指定了地图的大小，默认情况下，地图大小会取决于容器的尺寸。浏览器兼容性Google地图API所支持的浏览器种类与Google地图网站相同。由于不同的应用程序在遇到不兼容的浏览器的时候需要采取不同的对策，所以地图API提供了一个全局方法（GBrowserIsCompatible()）来检查兼容性。但是，当该方法发现一个不兼容的浏览器时，它不会自动采取任何措施。http://ditu.google.com/maps?file=api&v=2中的脚本几乎可以在任何浏览器中解析而不产生错误，所以您可以放心地在检查浏览器兼容性之前就包含该脚本文件。除了上面的第一个例子以外，本文档中的其它例子都不会检查浏览器兼容性，也不会在老的浏览器中显示错误信息。当然，实际的应用程序应该在浏览器不兼容时采取一些用户友好的措施。但是，为了让范例代码易读，我们在本文中省略了这种检查。不少应用程序都会不可避免地遇到浏览器或平台兼容性的问题。对于这类问题目前还没有简单的解决方案，但是您可以从Google地图API讨论组和quirksmode.org上找到一些解决技巧。XHTML和VML我们推荐您使用和标准兼容的XHTML页面来包含地图。当浏览器遇到页面顶端的DOCTYPE，它们就会用"标准兼容模式"来呈现页面。这种模式下，页面的布局和行为在不同的浏览器间会具有更好的一致性。如果您想在地图中显示折线，您需要在您的XHTML文档中包含VML命名空间和一些CSS代码。请注意：IE浏览器需要它方能正常显示折线。XHTML文档的开头应该类似这样：

我的Google地图v:*{behavior:url(#default#VML);}API版本更新地址http://ditu.google.com/maps?file=api&v=2中的v=2部分表明您使用的API版本号是2。您可以将它替换为v=2.x的形式，从而使用最新版本的API。但是请注意，最新发布的版本可能并不如v=2所指向的版本那样稳定。我们大约每两周都会更新Google地图API的版本，届时v=2.x版本中的新功能就会作为稳定版本被替换到v=2所指向的版本中。我们更新SMn版本时，都会给它们一个编号（例如，“版本2.76”）。随着我们对API的更新，基于旧版本的API编写的代码偶尔可能会无法正常工作。如果您确实要限定您的程序所使用的API版本，您可以明确地将该版本号包含在v参数中（例如，v=2.75）。但是，我们不推荐这么做。如果可能，请尽量使您的产品适应更新的版本。当我们对API进行重大升级时，我们会改变版本号并在GoogleCode和地图API讨论组上发布相关信息。一个新版本正式发布以后，我们会让新旧版本至少同时运行一个月，从而使您有足够的时间将代码迁移到新的版本上。另外，我们会以用户透明的方式更新API来解决Bug和提高性能。正常情况下，这些改动只会修正Bug或者提高性能，但是也可能会不经意地影响一些API用户的使用。如果您遇到问题，请到地图API讨论组来向我们反映。地理译码(Geocoding)地理译码是把地址（如"1600AmphitheatreParkway,MountainView,CA"）转换为地理坐标（如经度-122.083739，纬度37.423021）的流程。通过它，您就可以把数据库中的街道地址或用户提供的地址信息标记在地图上。但是，到目前为止，中文Google地图API的地理译码器尚不支持地理译码。不过，您可以根据我们提供的规范开发自己的地理译码器，或者使用第三方提供的地理译码器。行程规划和本地搜索Google地图API目前不包含行程规划服务。另外，Google地图API目前尚不包含本地搜索服务。标注管理如果将太多的标注添加到地图中，可能会大大减慢地图的绘制。同时，大量堆积的标注也会影响地图的视觉效果，尤其是在那些较宏观的缩放级别上。为了解决上述问题，我们引入了"标注管理器"功能，它能够有效地将数以百计的标注添加到同一地图中，并指定哪些标注应该在哪些缩放级别上出现。http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第5页将标注添加到标注管理器后，管理器会自主地管理这些标注，根据当前的显示区域和缩放级别判断哪些标注是可见的，并只传送这些标注给地图进行绘制。标注管理器会监视当前地图的可见范围和缩放级别，动态地从地图上添加或删除标注。同时，由于允许给每个标注指定其可见的缩放级别，程序员能够很容易地实现类似“标注聚集”的功能。这种管理大大地提高了地图绘制的效率，并能有效避免视觉堆积。示例程序下面的例子都只包括相关的JavaScript代码片段，而不是完整的HTML文件。您可以把这些JavaScript代码嵌入到第一个例子中给出的HTML文件框架中。当然，您也可以直接点击每个例子下面的链接来下载完整的HTML文件。基本操作下面的例子创建一个地图，并把它的中心置于北京的故宫博物院varmap=newGMap2(document.getElementById("map"));map.setCenter(newGLatLng(39.917,116.397),14);查看示例(simple.html)地图移动及动画下面的例子先显示一个地图，等待2秒后，会将地图的中心移到一个新的坐标上。panTo方法将地图的中心移动到一个指定的点。如果指定的点之前位于地图的可见区域内，则地图会平滑地移动到那儿，否则，就直接跳转到那个点。varmap=newGMap2(document.getElementById("map"));map.setCenter(newGLatLng(39.917,116.397),14);window.setTimeout(function(){map.panTo(newGLatLng(39.929419,116.388302),14);},2000);查看示例(animate.html)给地图添加控件您可以用addControl方法在地图上添加控件。在这个例子里，我们加入GSmallMapControl和GScaleControl控件，它们分别用于移动/缩放地图以及在地图上显示比例尺。varmap=newGMap2(document.getElementById("map"));map.addControl(newGSmallMapControl());map.addControl(newGScaleControl());map.setCenter(newGLatLng(39.917,116.397),14);查看示例(controls.html)http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第6页事件处理函数可以用GEvent.addListener方法来注册事件处理函数。该方法接受三个参数：地图、要处理的事件、以及一个当事件发生时需要调用的函数。在下面的例子中，当用户缩放地图后，地图的缩放级别会显示在网页中。varmap=newGMap2(document.getElementById("map"));map.addControl(newGLargeMapControl());GEvent.addListener(map,"zoomend",function(){document.getElementById("message").innerHTML=map.getZoom();});map.setCenter(newGLatLng(39.917,116.397),14);查看示例(event.html)有关事件处理的更多信息，请参阅事件概览。要获得完整的GMap2所支持的事件列表，以及对应处理函数的参数，请参阅GMap2.Events.打开气泡提示窗口要创建气泡提示窗口（信息窗口），可以调用openInfoWindow方法，并把要一个位置和一个要在其中显示的DOM元素作为参数传递给它。下面的代码将在地图的中心显示一个信息窗口，其内容是“Hello,world”。varmap=newGMap2(document.getElementById("map"));map.setCenter(newGLatLng(39.917,116.397),14);map.openInfoWindow(map.getCenter(),document.createTextNode("Hello,world"));查看示例(infowindow.html)地图覆盖物这个例子会在地图上显示10个位置随机的标注和一个5个随机点连成的折线。如果不为标注指定图标，则GMarker类会使用缺省的Google地图图标。有关自定义图标的例子请参见创建图标。请记住：为了在IE中正常显示折线，必须在您的HTML文档中包含VML命空间和相关CSS。更多信息请参见XHTML和VMLvarmap=newGMap2(document.getElementById("map")a;map.addControl(newGSmallMapControl());map.setCenter(newGLatLng(39.917,116.397),14);//随机地在地图上添加10个标注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++){http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第7页varpoint=newGLatLng(southWest.lat()+latSpan*Math.random(),southWest.lng()+lngSpan*Math.random());map.addOverlay(newGMarker(point));}//添加一个由5个随机点连成的折线，把随机点按其经度排序以避免折线相交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(newGOverviewMapControl());map.setCenter(newGLatLng(39.917,116.397),14);GEvent.addListener(map,"click",function(marker,point){if(marker){map.removeOverlay(marker);}else{map.addOverlay(newGMarker(point));}});查看示例(click.html)http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第8页有关事件处理的更多信息，请参阅事件概览。要获得完整的GMap2所支持的事件列表，以及对应处理函数的参数，请参阅GMap2.Events.给标注增加气泡提示窗口在这个例子中，我们捕获标注的单击事件，并为每个标注定制气泡提示窗口。利用Javascript函数闭包（匿名函数）技术，我们就可以为每个标注定制气泡提示窗口的内容。varmap=newGMap2(document.getElementById("map"));map.addControl(newGSmallMapControl());map.addControl(newGOverviewMapControl());map.setCenter(newGLatLng(39.917,116.397),14);//在给定的点上创建带编号的标注functioncreateMarker(point,number){varmarker=newGMarker(point);GEvent.addListener(marker,"click",function(){marker.openInfoWindowHtml("标注#"+number+"");});returnmarker;}//在地图的随机位置添加10个标注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)有关事件处理的更多信息，请参阅事件概览。要获得完整的GMap2所支持的事件列表，以及对应处理函数的参数，请参阅GMap2.Events.多页的气泡提示窗口第2版的API引入了openInfoWindowTabs()方法和GInfoWindowTab类，用于支持多页的气泡提示窗口。下面的例子演示了如何在标注上显示一个简单的多页气泡提示窗口。varmap=newGMap2(document.getElementById("map"));map.addControl(newGSmallMapControl());map.addControl(newGScaleControl());map.setCenter(newGLatLng(39.917,116.397),14);//气泡提示窗口的内容http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第9页varinfoTabs=[newGInfoWindowTab("页#1","这是第一页的内容"),newGInfoWindowTab("页#2","这是第二页的内容")];//将标注置于地图中央，并自动打开气泡提示窗口varmarker=newGMarker(map.getCenter());GEvent.addListener(marker,"click",function(){marker.openInfoWindowTabsHtml(infoTabs);});map.addOverlay(marker);marker.openInfoWindowTabsHtml(infoTabs);查看示例(tabbedinfowindow.html)创建图标这个例子中，我们为标注自定义新的图标。创建新图标时，我们必须为它指定前景图片、阴影图片，以及图标相对于地图和气泡提示窗口的“锚点”。varmap=newGMap2(document.getElementById("map"));map.addControl(newGSmallMapControl());map.addControl(newGScaleControl());map.setCenter(newGLatLng(39.917,116.397),14);//创建我们的“缩微”图标varicon=newGIcon();icon.image="./images/mm_20_red.png";icon.shadow="./images/mm_20_shadow.png";icon.iconSize=newGSize(12,20);icon.shadowSize=newGSize(22,20);icon.iconAnchor=newGPoint(6,20);icon.infoWindowAnchor=newGPoint(5,1);//在地图的随机位置添加10个标注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,icon));}查看示例(icon.html)http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第10页使用图标类通常，您需要创建一系列的图标，它们可能有很多不同的前景，但形状和背景却是相同的。此时最简单的方式就是利用GIcon类的复制构造函数，它会把现有图标的所有属性复制给您想定制的新图标。varmap=newGMap2(document.getElementById("map"));map.addControl(newGSmallMapControl());map.addControl(newGScaleControl());map.setCenter(newGLatLng(39.917,116.397),14);//为所有的标注创建一个“基准”图标，并指定它的阴影、尺寸、锚点等varbaseIcon=newGIcon();baseIcon.shadow="http://ditu.google.com/mapfiles/shadow50.png";baseIcon.iconSize=newGSize(20,34);baseIcon.shadowSize=newGSize(37,34);baseIcon.iconAnchor=newGPoint(9,34);baseIcon.absolutewAnchor=newGPoint(9,2);baseIcon.infoShadowAnchor=newGPoint(18,25);//创建一个标注，它的气泡提示窗口会根据标注编号显示对应的英文字母functioncreateMarker(point,index){//利用我们的图标类，为这个标注创建一个带字母的图标varletter=String.fromCharCode("A".charCodeAt(0)+index);varicon=newGIcon(baseIcon);icon.image="http://ditu.google.com/mapfiles/marker"+letter+".png";varmarker=newGMarker(point,icon);GEvent.addListener(marker,"click",function(){marker.openInfoWindowHtml("标注"+letter+"");});returnmarker;}//在地图的随机位置添加10个标注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));}查看示例(iconclass.html)http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第11页可拖拽的标注标注是支持用户交互的，您可以点击它，或将它拖动到一个新的位置。在这个例子中，我们在地图上放置一个可以拖动的标注，并捕获它的几个简单事件。可拖动的标注支持四种事件：click，dragstart，drag和dragend。标注默认是可以点击的，但不能被拖动。为此，我们必须在初始化标注时，为它指定一个附加的选项draggable:true。缺省情况下，可拖动的标注在放下时会跳动。如果您不喜欢这个效果，可以把bouncy选项设置为false。varmap=newGMap2(document.getElementById("map"));varcenter=newGLatLng(39.917,116.397);map.setCenter(center,14);varmarker=newGMarker(center,{draggable:true});GEvent.addListener(marker,"dragstart",function(){map.closeInfoWindow();});GEvent.addListener(marker,"dragend",function(){marker.openInfoWindowHtml("标注放下时会跳动...");});map.addOverlay(marker);查看示例(dragmarker.html)编码折线Google地图中，GPolyline对象是用一系列的点表示的，这种方法虽然简单易用但是不够简洁。当需要表示长且复杂的折线时会消耗大量的内存，而且绘制起来也很慢。此外，这种折线的每一条线段在地图的每个缩放级别中都可见，尽管在较低的分辨率下这是完全没有必要的。鉴于此，Google地图API也允许您用编码折线来表示路径。编码折线用一个压缩格式的ASCII字符串来表现一系列的点。编码折线还允许您指定线段的可见缩放级别；这样您就可以指定在各种的缩放级别下如何表现折线的细节。虽然这种方法用起来有些复杂，但是它可以让地图的绘制效率更高。例如，有3个点的GPolyline对象通常为:varpolyline=newGPolyline([newGLatLng(39.4419,116.1419),newGLatLng(39.4519,116.1519),newGLatLng(39.4619,116.1819)],"#FF0000",10);map.addOverlay(polyline);而与之对应的编码GPolyline对象则如下：（请暂时不要关心编码算法的细节）varencodedPolyline=newGPolyline.fromEncoded({color:"#FF0000",weight:10,http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第12页points:"ynvoF{}zcUq}@m}@m}@ozD",levels:"BBB",zoomFactor:32,numLevels:4});map.addOverlay(encodedPolyline);需要注意的两点是：1.首先，编码折线是用一系列的ASCII字符来表示一系列的点，正如基本的GPolyline对象用一系列经纬度来表示那样。为点序列创建对应ASCII编码的算法可以在这里找到（英文）。如果您需要动态地在服务器上计算这些编码的话，那么就需要了解这个算法。但是，如果您仅仅需要将现有点的经纬度转换成编码，那么可以直接使用我们提供的交互工具（英文）。2.其次，编码折线允许您指定每个线段的最高可见缩放级别。如果一个点在更高的缩放级别中不可见，那么折线会自动地连接上一个可见点和下一个可见点。注意，这个特性是普通折线不支持的，在较宏观的缩放级别上，它对于加快折线绘制速度非常有利，因为折线的一些细节无需表现出来。例如，当地图缩放到省级的时候，一条用于表现从北京市到上海市驾驶路线的编码折线，就不需要表现出北京市内的具体街道了。查看示例(polylineencoding.html)在地图中使用XML和异步HTTP通信(AJAX)在这里例子里，我们用GDownloadUrl方法下载一个包含经纬度列表的XML文件("data.xml")。当下载完成，我们用GXml类来解析，并为XML文档中的每一个点建立一个标注。varmap=newGMap2(document.getElementById("map"));map.addControl(newGSmallMapControl());map.addControl(newGScaleControl());map.setCenter(newGLatLng(39.917,116.397),14);//从data.xml下载数据并加载到地图上，我们期望的格式是：////////GDownloadUrl("data.xml",function(data,responseCode){varxml=GXml.parse(data);varmarkers=xml.documentElement.getElementsByTagName("marker");for(vari=0;i标签应该类似这样：检查是否有输入错误，尤其要注意的是，JavaScript是大小写敏感的使用JavaScript调试器调试。在Firefox中，您可以用内置的JavaScript控制台，或者Venkman调试器；在IE中，您可以使用Microsoft脚本调试器。在地图API讨论组上搜索您的问题。如果没有找到您想要的解答，请发布您的问题，并提供一个链接指向能说明您的问题的网页。从第三方获得其他开发资料其它资料这里给出一些额外资料，请注意这些站点不受Google的管理，Google也不为其提供技术支持Mapki是一个流行的GoogleMapsAPI论坛，包括它的FAQ页.（英文）Zmap是一个流行的中文地图API网站API概览API概览介绍了地图API的一些核心概念。关于本API的全部类及方法的参考，请参见地图API类参考GMap2类GMap2类的实例表示网页中的一个地图。您可以创建任意多个该类的实例（一个实例就对应页面上的一个地图）。在创建地图实例时，您需要指定一个包含该地图的页面元素（通常是div元素），这个元素称为地图控件的容器。除非您明确地指定了地图的大小，默认情况下地图大小会取决于容器的尺寸。GMap2类提供了控制地图中心和缩放级别的方法、添加删除覆盖物（例如GMarker和GPolyline）的方法，以及用于打开气泡提示窗口的方法（正如您在Google地图中看到的）。更多信息参见气泡提示窗口。关于GMap2类的更多信息，请参见GMap2类参考。事件利用事件处理函数，您可以给您的程序加入动态效果。每个对象都关联着一些事件，您的程序可以用静态方法GEvent.addListener和GEvent.bind来"监听"这些事件。例如，下面的代码片断在每次用户点击地图时显示一个对话框：http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第19页varmap=newGMap2(document.getElementById("map"));map.setCenter(newGLatLng(39.917,116.397),14);GEvent.addListener(map,"click",function(){alert("您点击了地图。");});GEvent.addListener的第三个参数是一个函数，这个函数将用于处理该事件。如果要用类实例的方法来处理事件，可以用GEvent.bind方法。在下面的例子中，MyApplication类实例把地图事件关联到它的方法上，在触发时修改对象的状态：functionMyApplication(){this.counter=0;this.map=newGMap2(document.getElementById("map"));this.map.setCenter(newGLatLng(39.917,116.397),14);GEvent.bind(this.map,"click",this,this.onMapClick);}MyApplication.prototype.onMapClick=function(){this.counter++;alert("这是您第"+this.counter+"次点击地图");}varapplication=newMyApplication();查看示例(bind.html)气泡提示窗口气泡提示窗口可以浮动在地图之上并显示HTML内容。每个地图都有一个气泡窗口，它包含一个内容区域和一个锥形箭头，锥形的箭头指向地图上的指定点。例如，当您在Google地图上点击一个标记，就可以看到气泡提示窗口。一个地图不能同时显示多个气泡提示窗口，但是您可以根据需要移动该窗口或者修改它的内容。气泡提示窗口的基本方法是openInfoWindow，它的参数包括一个点和一个HTMLDOM元素。HTMLDOM元素会被添加到气泡提示窗口的容器内，而气泡提示窗口的锥形箭头会指向给定的点。openInfoWindowHtml方法很类似，但是它接受HTML字符串作为参数，而不是HTMLDOM元素。如果要在标记等覆盖对象之上显示气泡提示窗口，您可以设置第三个可选参数：气泡提示窗口尖端和给定点之间的偏移量。例如，如果您的标记高为10个像素，那么您可以把像素偏移量GSize(0,-10)传给方法。GMarker类提供了openInfoWindow方法，它会自动计算与您的图标形状及尺寸相应的偏移量。http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第20页更多信息请参见GMap2和GMarker的类参考。地图覆盖物覆盖物是覆盖在地图的某个固定经纬度坐标上的对象，当您拖动地图或者改变地图类型的时候，他们也会跟着移动。地图API支持两种类型的覆盖对象：标注：地图上的图标；折线：用一系列点连成的线。标注和图标GMarker类的构造函数有两个参数，一个是图标，一个是点。此外，它还支持一些事件，如"点击"事件。在地图上创建标注的简单例子，请参见上面的overlay.html。创建标注最麻烦的操作是指定一个图标，其原因是地图API中的一个图标需要涉及多个图片。每个图标包含一个前景图片和一个影子图片。影子是由前景图片向右上方倾斜45度构成的，而影子图片的左下角应该和前景图片的左下角对齐。影子图片应该是24位的PNG格式，它的背景应该是半透明的，这样影子的边缘才能在地图上正确显示。GIcon类需要您在初始化图标时指定这些图片的尺寸，这样地图API就能用恰当的尺寸来创建这些图片。以下是创建一个图标所需的最少代码（图标来自Google地图）：varicon=newGIcon();icon.image="http://ditu.google.com/mapfiles/marker.png";icon.shadow="http://ditu.google.com/mapfiles/shadow50.png";icon.iconSize=newGSize(20,34);icon.shadowSize=newGSize(37,34);GIcon类还有几个属性，当您的图标想得到最好的浏览器兼容性和功能特性时需要设置它们。例如，imageMap属性可以用来设定图标的不透明区域的形状。如果该属性没有设置，则在Firefox/Mozilla下，整个图片范围（包括透明区域）都可以点击。更多的信息参见GIcon类参考。折线GPolyline类的构造函数以一个点的数组为参数，并按照给定点的顺序创建连接这些点的一系列线段。您还可以指定这些线段的颜色、宽度和透明度。颜色应该使用16进制的数字表示，如#ff0000。而不要用red，GPolyline类不能解析颜色名。下面的代码片断创建两点之间10个像素宽的红色折线：varpolyline=newGPolyline([newGLatLng(39.917,116.397),newGLatLng(39.927,116.387)http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第21页],"#ff0000",10);map.addOverlay(polyline);在InternetExplorer下，Google地图使用VML来绘制折线（更多信息请参见XHTML和VML）。在其它浏览器中，我们会从Google服务器请求线的图片并覆盖在地图上，当地图缩放或拖动的时候会刷新图片。控件想为您的地图加入缩放按钮之类的控件，请使用addControl方法。地图API内置了很多可以用在您地图上的控件：GLargeMapControl-大号平移和缩放控件，位置是左上角。GSmallMapControl-小号平移和缩放控件，位置是左上角。GSmallZoomControl-小号缩放控件，位置是左上角。GScaleControl-地图比例尺。GOverviewMapControl-位于屏幕右下角、可以收起来的缩略图。例如，如果想在您的地图上添加一个平移和缩放控件，您可以使用下面的这行代码：map.addControl(newGLargeMapControl());addControl方法有一个可选参数GControlPosition，通过它您自己可以指定控件的位置。如果省略了这个参数，地图API将采用控件的默认位置。这个例子加入一个比例尺控件到距离地图右上角10个像素的位置：map.addControl(newGScaleControl(),newGControlPosition(G_ANCHOR_TOP_RIGHT,newGSize(10,10)));更多信息请查看GControlPosition类参考.XML和RPCGoogle地图API采用工厂方法来创建XmlHttpRequest对象，它支持新版本IE，Firefox和Safari。下面的例子下载一个叫做myfile.txt的文件，然后用JavaScript的alert函数显示其内容：varrequest=GXmlHttp.create();request.open("GET","myfile.txt",true);request.onreadystatechange=function(){if(request.readyState==4){alert(request.responseText);}}request.send(null);http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn Google地图API文档第22页这个API还引入了类似典型的HTTPGET请求的方法：GDownloadUrl，它不需要像XmlHttpRequest那样检查readyState。上面的例子可用GDownloadUrl函数改写如下：GDownloadUrl("myfile.txt",function(data,responseCode){alert(data);});您可以用静态方法GXml.parse来解析XML文档，它的参数是一个XML字符串。这个方法兼容大多数现代浏览器，如果遇到不支持本地XML解析的浏览器，它会抛出一个异常。更多信息请参见GXmlHttp和GXml的类参考。减少浏览器内存泄露Google地图API鼓励使用函数闭包（匿名函数）。由于API的事件处理机制会把事件关联到DOM结点上，这不可避免地会导致一些浏览器内存泄露，尤其是在InternetExplorer中。第2版的API引入了一个新的方法：GUnload()，它会消除大多数导致内存泄露的循环引用。因此，您应该在您的网页的unload事件中调用GUnload()方法，以避免您应用程序可能带来的内存泄露问题。这个函数可以消除Google地图在InternetExplorer下的内存泄露，但是如果您特别关心内存消耗问题，您仍旧应该用Drip等工具测试您自己网站的内存泄露情况。http://www.google.com/apis/maps/documentation/index.html2007-10-2913:02:41PDF文件使用"pdfFactoryPro"试用版本创建www.fineprint.cn

当前文档最多预览五页，下载文档查看全文

侵权申诉



1 1 2 3 4 5 / 22



此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文

Google 地图 API 文档

Google 地图 API 文档

最近更新

大家都在看

相关文章

相关标签