Google Maps API for China

GoogleMapsAPIforChinaXinghuaAnMay31,20073GoogleConfidentialGoogleMapsAPI出现之前…4GoogleConfidentialGoogleMapsAPI发布之后…5GoogleConfidential什么是GoogleMapsAPI？•对web开发者来说，是一个Javascript类库。它可以：–在用户自己的网页中嵌入GoogleMaps–将自己网页的内容与GoogleMaps融合呈现–是一个开放系统：对GoogleMaps自身进行二次开发•使用和开发绝大多数情况下完全免费！•1+1=2.537…6GoogleConfidentialGoogleMapsAPI•基本功能及使用–目前版本：GMap2–HelloWorld程序，Maps控件，事件处理，信息窗口，层，点、折线以及多边型等•高级功能简介–异步HTTP通讯：GXmlHttp,GDownloadUrl–创建自己的控件：控件子类化–地址定位•最新功能–KML与GeoRSS支持–地图标注管理器：MarkerManager–我的地图：MyMaps7GoogleConfidentialGoogleMapsAPI8GoogleConfidentialMapsAPI基本功能–从HelloWorld程序开始scriptsrc=“=api&v=2&key=ReplaceYourGoogleMapKeyHere”type=text/javascript/scriptscripttype=text/javascriptvarmap=newGMap2(document.getElementById(map));map.setCenter(newGLatLng(37,107),4);/script•在网页中创建Google地图对象9GoogleConfidentialMapsAPI基本功能–从HelloWorld程序开始•以上代码在网页指定的div元素中创建一个Google地图对象，并将视野设置成全国范围10GoogleConfidentialMapsAPI基本功能–添加控件(Controls)varmap=newGMap2(document.getElementById(map));map.addControl(newGSmallMapControl());map.setCenter(newGLatLng(37,107),4);•以下代码在地图中添加视野缩放的控件11GoogleConfidentialMapsAPI基本功能–信息窗口(InfoWindows)varmap=newGMap2(document.getElementById(map));map.setCenter(newGLatLng(37,107),4);map.openInfoWindow(map.getCenter(),document.createTextNode(“Hello,World”));•以下代码在地图中弹出一个信息窗口12GoogleConfidentialMapsAPI基本功能–图层(Overlays)varmap=newGMap2(document.getElementById(map));map.setCenter(newGLatLng(37,107),4);varbounds=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));}•创建标注(GMarkers)13GoogleConfidentialMapsAPI基本功能–图层(Overlays)…varpoints=[];for(vari=0;i5;i++){points.push(newGLatLng(southWest.lat()+latSpan*Math.random(),southWest.lng()+lngSpan*Math.random()));}map.addOverlay(newGPolyline(points));•创建多点折线(GPolylines)14GoogleConfidentialMapsAPI基本功能–图层(Overlays)•以上代码在地图视野范围内随机创建10个标注和一条折线15GoogleConfidentialMapsAPI基本功能–图层(Overlays)…varicon=newGIcon();icon.image===newGSize(12,20);icon.shadowSize=newGSize(22,20);icon.iconAnchor=newGPoint(6,20);icon.infoWindowAnchor=newGPoint(5,1);for(vari=0;i10;i++){varpoint=newGLatLng(randLat(),randLong());map.addOverlay(newGMarker(point,icon));}•创建自定义图标(GIcon)16GoogleConfidentialMapsAPI基本功能–图层(Overlays)•以上代码在地图上创建10个自定义带阴影的图标17GoogleConfidentialMapsAPI基本功能–多页标信息窗口(GInfoWindowTab)varmap=newGMap2(document.getElementById(map));map.setCenter(newGLatLng(37.442,-122.142),13);//创建两个包含不同内容的页标varinfoTabs=[newGInfoWindowTab(“公司名称”,“Google中国),newGInfoWindowTab(“详细信息”,“地址：北京清华科技园科建大厦)];varmarker=newGMarker(map.getCenter());GEvent.addListener(marker,click,function(){marker.openInfoWindowTabsHtml(infoTabs);});map.addOverlay(marker);marker.openInfoWindowTabsHtml(infoTabs);•以下代码在地图中创建一个包含两个页标的信息窗口，每个页标显示不同的内容18GoogleConfidentialMapsAPI基本功能–多页标信息窗口(GInfoWindowTab)19GoogleConfidentialMapsAPI基本功能–捕获及处理事件addMaptype,removemaptype,click,movestart,move,moveend,zoomend,maptypechanged,infowindowopen,infowindowclose,addoverlay,removeoverlay,clearoverlay,clearoverlays,mouseover,mouseout,mousemove,dragstart,drag,dragend,load•支持多种事件的捕获20GoogleConfidentialMapsAPI基本功能–捕获及处理事件…GEvent.addListener(map,click,function(marker,point){if(marker){map.removeOverlay(marker);}else{map.addOverlay(newGMarker(point));}});•响应用户鼠标点击代码示例当地图被点击时,在当前鼠标位置创建一个标注；再次点击此处将取消该标注21GoogleConfidentialMapsAPI基本功能–捕获及处理事件…GEvent.addListener(map,moveend,function(){varcenter=map.getCenter();document.getElementById(message).innerHTML=“当前地图中心点：+center.toString();});•响应地图移动事件代码示例22GoogleConfidentialMapsAPI基本功能–捕获及处理事件•当地图被拖动后,更新显示当前地图中心点23GoogleConfidentialMapsAPI高级功能–XMLRPC•基于XML的异步HTTP通讯–GXmlHttp•对XmlHttpRequest的封装–GDownloadUrl•调用更简单•自动检查onreadystatechange24GoogleConfidentialMapsAPI高级功能–XMLRPCvarrequest=GXmlHttp.create();request.open(GET,myfile.txt,true);request.onreadystatechange=function(){if(request.readyState==4){alert(request.responseText);}};request.send(null);•GXmlHttp代码示例•GDownloadUrl代码示例varGDownloadUrl(myfile.txt,function(data,responseCode){alert(data);}25GoogleConfidentialMapsAPI高级功能–XMLRPC//markers//markerlat=39.441lng=“116.141///markerlat=39.322lng=“116.213////markersGDownloadUrl(data.xml,function(data,responseCode){varxml=GXml.parse(data);varmarkers=xml.documentElement.getElementsByTagName(marker);for(vari=0;imarkers.length;i++){varpoint=newGLatLng(parseFloat(markers[i].getAttribute(lat)),parseFloat(markers[i].getAttribute(lng)));map.addOverlay(newGMarker(point));}});•使用GDownloadUrl下载xml格式的标注文件并显示26GoogleConfidentialMapsAPI高级功能–XMLRPC•使用GDownloadUrl下载xml格式的标注文件并显示27GoogleConfidentialMapsAPI高级功能–创建自定义控件•从GControl派生自定义控件子类•重载以下父类方法–initialize()–getDefaultPosition()•更多可以重载的方法–setButtonStyle()28GoogleConfidentialMapsAPI高级功能–创建自定义控件functionT