资源描述
GoogleMapsAPI基础(1),谢健文华南农业大学信息学院,1.GoogleMapsAPI概述,GoogleMaps简介GoogleMaps开发工具什么是GoogleMapsAPI如何学习GoogleMapsAPI,Googlemaps用于GPS导航,GoogleMaps简介,在浏览器中展现包含地理信息的数据可拖动放缩的地图卫星地图，地形图，街景图，实时交通地址定位，周边搜索，驾车路线，公交查询更多Maps产品GoogleEarth手机版本(GMM)GoogleSky,GoogleMaps开发工具,MapsAPI迷你地图(Mapplets)我的地图(MyMaps)KMLMapsAPIforFlashEarthAPIStaticMapsAPI,GoogleMapsAPI使您能够使用JavaScript将Google地图嵌入自己的网页中。API提供了大量实用工具用以处理地图，并通过各种服务向地图添加内容，从而使您能够在您的网站上创建功能强大的地图应用程序。地图API是一项免费的测试版服务，在客户可免费访问的任何网站上均可使用。,什么是GoogleMapsAPI?,什么是GoogleMapsAPI?,基于Javascript的函数/类库在你的网站中嵌入Google地图将你的数据与地图融合呈现创建标记，信息窗口，折线，多边形等KML与GeoRSS的支持在你的网站中使用GoogleMaps的各种功能地址定位，周边搜索，驾车查询等GoogleMaps二次开发平台创建新的地图组件个性化地图,版本与费用,完全免费！如果你的网站服务对用户完全免费在地图上保留Google的标志50000次/天地址定位查询开发的东西有创意企业版无限量地址定位查询可以运行在收费网站可以运行在防火墙后面或企业局域网取来自Google的技术支持,GoogleMapsAPI应用实例,如何学习GoogleMapsAPI?,上网,实战,交流,有关资料,中文文档,2.GoogleMapsAPI地图基础,内容：GMap2基础对象的用法和地图操作的基础。Google地图的“Hello,World”加载Google地图API地图DOM元素GMap2-基本对象初始化地图加载地图经纬度地图属性地图交互信息窗口,Google地图的“Hello,World”,Google地图JavaScriptAPI示例functioninitialize()if(GBrowserIsCompatible()varmap=newGMap2(document.getElementById(map_canvas);map.setCenter(newGLatLng(39.917,116.397),14);,替换为您自己的MapsAPI密钥,显示以北京的故宫博物院为中心的500 x300地图,加载Google地图API,URL指向包含使用Google地图API所需所有符号和定义的JavaScript文件的位置,替换为您自己的MapsAPI密钥,地图DOM元素,要使地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为div的元素并在浏览器的文档对象模型(DOM)中获取此元素的引用执行此操作。,GMap2-基本对象,表示地图的JavaScript类是GMap2类。此类的对象在页面上定义单个地图。当创建新的地图实例时，在页面中指定一个DOM节点（通常是div元素）作为地图的容器。HTML节点是JavaScriptdocument对象的子节点，我们通过document.getElementById()方法获取对此元素的引用。,varmap=newGMap2(document.getElementById(map_canvas);,初始化地图,初始化通过地图的setCenter()方法完成。setCenter()方法需要GLatLng经纬度坐标和缩放级别，并且调用此方法必须在对地图执行任何其它操作（包括设置地图本身的任何其它属性）之前。,map.setCenter(newGLatLng(39.917,116.397),14);,加载地图,为了确保只有在完全加载页面后才将我们的地图放在页面上，仅在HTML页面的元素收到onload事件后才执行构造GMap2的函数。,经纬度,GLatLng对象引用地图位置，以（纬度，经度）的顺序传递参数。GLatLng对象在Google地图API中有许多用途。例如，GMarker对象在其构造函数中接收GLatLng参数，并在地图上给定的地理位置上叠加一个标记。以下示例使用getBounds()返回当前视图，然后在地图上这些边界内随机放置10个标记。,varmyGeographicCoordinates=newGLatLng(myLatitude,myLongitude),functioninitialize()if(GBrowserIsCompatible()varmap=newGMap2(document.getElementById(map_canvas);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;i10;i+)varpoint=newGLatLng(southWest.lat()+latSpan*Math.random(),southWest.lng()+lngSpan*Math.random();map.addOverlay(newGMarker(point);,Map-markers,地图属性,地图类型的标准类型：G_NORMAL_MAP-默认视图G_SATELLITE_MAP-显示Google地球卫星图像G_HYBRID_MAP-混合显示普通视图和卫星视图G_DEFAULT_MAP_TYPES-这三个类型的数组GMap2对象的setMapType()方法用于设置地图类型，例如：例如：以下代码将地图设置为使用来自Google地球的卫星视图：,varmap=newGMap2(document.getElementById(map_canvas);map.setMapType(G_SATELLITE_MAP);,地图属性,地图包含用于了解各种情况的大量属性。例如，要了解当前视窗的尺寸，请使用GMap2对象的getBounds()方法返回GLatLngBounds值。每个地图还包含一个缩放级别，它定义当前视图的分辨率。普通地图视图中，可以使用0（最低缩放级别，在地图上可以看到整个世界）到19（最高缩放级别，可以看到每个建筑物）之间的缩放级别。缩放级别因所查看地区而异，因为地图上某些地区的数据比其它地区更详细。在卫星视图中可以使用多达20个缩放级别。可以通过使用GMap2对象的getZoom()方法检索当前地图所使用的缩放级别。,地图交互,GMap2对象具有大量内置行为，并提供了大量配置方法来改变地图对象本身的行为。默认情况下，地图对象会和上一样对用户的活动做出反应。但您可以使用大量工具方法改变此行为。例如，方法GMap2.disableDragging()禁用单击地图和将地图拖到新位置的功能。还可以通过编程与地图交互。GMap2对象支持可以直接改变地图状态的大量方法。例如，setCenter()、panTo、zoomIn()和setCenter()方法以程序方式而不是通过用户交互在地图上操作。可以通过使用地图API事件进行更复杂的交互。,varmap=newGMap2(document.getElementById(map_canvas);map.setCenter(newGLatLng(39.917,116.397),14);window.setTimeout(function()map.panTo(newGLatLng(37.4569,-122.1569);,1000);,以下示例显示一个地图，等两秒，然后平移到新的中心点。panTo方法将地图的中心设置在给定点。如果指定点在地图的可见部分，则地图会平稳地移动到该点，否则地图会跳到该点。,地图交互示例,信息窗口,Google地图API中的每个地图都可以显示类型为GInfoWindow的单个“信息窗口”，它在地图上方的浮动窗口中显示HTML内容。GInfoWindow对象没有构造函数。当创建地图时，会有一个信息窗口自动创建并与地图关联。对给定的地图，一次不能显示多个信息窗口。GMap2对象提供了一个openInfoWindow()方法，它取一个点和一个HTMLDOM元素作为参数。HTMLDOM元素追加到信息窗口容器中，信息窗口的头固定在给定点上。,varmap=newGMap2(document.getElementById(map_canvas);map.setCenter(newGLatLng(39.917,116.397),14);map.openInfoWindow(map.getCenter(),document.createTextNode(Hello,world);,3.GoogleMapsAPI地图事件,地图事件概述事件侦听器在事件侦听器中使用Closure在事件中使用传递的参数将事件绑定到对象方法侦听DOM事件删除事件侦听器,地图事件概述,浏览器中的JavaScript是事件驱动的。对某些事件感兴趣的程序将为这些事件注册JavaScript事件侦听器，并在收到这些事件时执行代码。Google地图API通过为地图API对象定义定制事件而成为这种事件模型的一部分。地图API事件与标准DOM事件不同。,事件侦听器,处理Google地图API中的事件的方式是使用GEvent名称空间中的工具函数注册事件侦听器。要注册以获取这些事件相关的通知，请使用静态方法GEvent.addListener()。这种方法在指定事件发生时采用对象、待侦听事件以及回调函数。有关GMap2事件及其生成的参数的完整列表，请参阅GMap2.Events。,varmap=newGMap2(document.getElementById(map_canvas);map.setCenter(newGLatLng(39.917,116.397),14);GEvent.addListener(map,click,function()alert(您点击了地图。););,在事件侦听中使用Closure*,执行事件侦听器时，通常较好的做法是同时将私有数据和持久数据与一个对象关联。JavaScript不支持“私有”实例数据，但支持允许内部函数访问外部变量的closure。在事件侦听器中要访问通常与事件发生相关对象不关联的变量时，closure非常有用。以下示例在事件侦听器中使用closure将一个秘密消息分配给一组标记。单击任何标记将可以查看秘密消息的一部分，秘密消息并不包含在标记本身内。,varmessage=这,是,个,秘密,消息;if(GBrowserIsCompatible()varmap=newGMap2(document.getElementById(map_canvas);map.setCenter(newGLatLng(39.917,116.397),14);/在给定点创建标记functioncreateMarker(latlng,number)varmarker=newGMarker(latlng);marker.value=number;GEvent.addListener(marker,click,function()varmyHtml=#+number+messagenumber-1;map.openInfoWindowHtml(latlng,myHtml););returnmarker;/在地图的随机位置添加5个标记/注意我们并没有把秘密消息添加到标记的实例数据中varbounds=map.getBounds();varsouthWest=bounds.getSouthWest();varnorthEast=bounds.getNorthEast();varlngSpan=northEast.lng()-southWest.lng();varlatSpan=northEast.lat()-southWest.lat();for(vari=0;i5;i+)varlatlng=newGLatLng(southWest.lat()+latSpan*Math.random(),southWest.lng()+lngSpan*Math.random();map.addOverlay(createMarker(latlng,i+1);,在事件中使用传递的参数,地图API事件系统中的许多事件在触发时都可以传递参数。例如，GMap2“click”事件可以传递两个参数(overlay,point)。可以通过将指定的符号直接传递给事件侦听器中的函数来访问这些参数。,varmap=newGMap2(document.getElementById(map_canvas);map.setCenter(newGLatLng(39.917,116.397),14);GEvent.addListener(map,click,function(overlay,point)varmyHtml=GPoint为：+map.fromLatLngToDivPixel(point)+，缩放级别为：+map.getZoom();map.openInfoWindow(point,myHtml););map.addControl(newGSmallMapControl();map.addControl(newGMapTypeControl();,将事件绑定到对象方法,functionMyApplication()this.counter=0;this.map=newGMap2(document.getElementById(map_canvas);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+次点击地图);functioninitialize()if(GBrowserIsCompatible()varapplication=newMyApplication();,应用程序类,应用程序类的方法,侦听DOM对象,Google地图API事件模型创建并管理自己的定制事件。然而DOM也创建和分派自己的事件，它取决于当前使用的特定浏览器事件模型。如果要捕获并响应这些事件，Google地图API提供了独立于浏览器的包装器来侦听和绑定DOM事件，而无需定制代码。GEvent.addDomListener()静态方法可以为DOM节点上的DOM事件注册事件处理程序。类似地，静态方法GEvent.bindDom()允许您为类实例上的DOM事件注册事件处理程序。,删除事件侦听器,不再需要一个事件侦听器时，应将其删除。以下实例通过在地图上添加标记的方式来响应单击。之后的任何单击将会删除该事件侦听器。请注意，结果将不再执行removeOverlay()代码。,functionMyApplication()this.counter=0;this.map=newGMap2(document.getElementById(map_canvas);this.map.setCenter(newGLatLng(39.917,116.397),14);varmyEventListener=GEvent.bind(this.map,click,this,function(marker,latlng)if(this.counter=0)if(latlng)this.map.addOverlay(newGMarker(latlng)this.counter+;else/第二次触发事件时，事件侦听器将被删掉，这段代码也不会再被执行this.removeOverlay(marker)elseGEvent.removeListener(myEventListener););functioninitialize()if(GBrowserIsCompatible()varapplication=newMyApplication();,
展开阅读全文