Google Maps API 基础1

GoogleMapsAPI基础(1)谢健文华南农业大学信息学院1.GoogleMapsAPI概述GoogleMaps简介GoogleMaps开发工具什么是GoogleMapsAPI如何学习GoogleMapsAPIGooglemaps用于GPS导航GoogleMaps简介在浏览器中展现包含地理信息的数据可拖动放缩的地图卫星地图，地形图，街景图，实时交通地址定位，周边搜索，驾车路线，公交查询更多Maps产品GoogleEarth手机版本(GMM)GoogleSky…GoogleMaps开发工具•MapsAPI•迷你地图(Mapplets)•我的地图(MyMaps)•KML•MapsAPIforFlash•EarthAPI•StaticMapsAPIGoogleMapsAPI使您能够使用JavaScript将Google地图嵌入自己的网页中。API提供了大量实用工具用以处理地图，并通过各种服务向地图添加内容，从而使您能够在您的网站上创建功能强大的地图应用程序。地图API是一项免费的测试版服务，在客户可免费访问的任何网站上均可使用。什么是GoogleMapsAPI?什么是GoogleMapsAPI?基于Javascript的函数/类库在你的网站中嵌入Google地图将你的数据与地图融合呈现创建标记，信息窗口，折线，多边形等KML与GeoRSS的支持在你的网站中使用GoogleMaps的各种功能地址定位，周边搜索，驾车查询等GoogleMaps二次开发平台创建新的地图组件个性化地图版本与费用完全免费！如果…你的网站服务对用户完全免费在地图上保留Google的标志50000次/天地址定位查询开发的东西有创意企业版无限量地址定位查询可以运行在收费网站可以运行在防火墙后面或企业局域网取来自Google的技术支持GoogleMapsAPI应用实例如何学习GoogleMapsAPI?上网实战交流有关资料中文文档英文文档讨论组中文GoogleMapsAPI示例地图基础内容：GMap2基础对象的用法和地图操作的基础。Google地图的“Hello,World”加载Google地图API地图DOM元素GMap2-基本对象初始化地图加载地图经纬度地图属性地图交互信息窗口Google地图的“Hello,World”!DOCTYPEhtml-//W3C//DTDXHTML1.0Strict//EN==content-typecontent=text/html;charset=utf-8/titleGoogle地图JavaScriptAPI示例/titlescriptsrc==api&v=2&key=abcdefgtype=text/javascript/scriptscripttype=text/javascriptfunctioninitialize(){if(GBrowserIsCompatible()){varmap=newGMap2(document.getElementById(map_canvas));map.setCenter(newGLatLng(39.917,116.397),14);}}/script/headbodyonload=initialize()onunload=GUnload()divid=map_canvasstyle=width:500px;height:300px/div/body/html替换为您自己的MapsAPI密钥显示以北京的故宫博物院为中心的500x300地图加载Google地图APIscriptsrc==api&v=2&key=abcdefgtype=text/javascript/scriptURL指向包含使用Google地图API所需所有符号和定义的JavaScript文件的位置替换为您自己的MapsAPI密钥地图DOM元素要使地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为div的元素并在浏览器的文档对象模型(DOM)中获取此元素的引用执行此操作。divid=map_canvasstyle=width:500px;height:300px/divGMap2-基本对象表示地图的JavaScript类是GMap2类。此类的对象在页面上定义单个地图。当创建新的地图实例时，在页面中指定一个DOM节点（通常是div元素）作为地图的容器。HTML节点是JavaScriptdocument对象的子节点，我们通过document.getElementById()方法获取对此元素的引用。varmap=newGMap2(document.getElementById(map_canvas));构造函数描述GMap2(container,opts?)在给定的HTMLcontainer（通常是DIV元素）中创建新的地图。还可以传递类型为GMap2Options的可选参数opts。初始化地图初始化通过地图的setCenter()方法完成。setCenter()方法需要GLatLng经纬度坐标和缩放级别，并且调用此方法必须在对地图执行任何其它操作（包括设置地图本身的任何其它属性）之前。map.setCenter(newGLatLng(39.917,116.397),14);加载地图为了确保只有在完全加载页面后才将我们的地图放在页面上，仅在HTML页面的body元素收到onload事件后才执行构造GMap2的函数。bodyonload=initialize()onunload=GUnload()经纬度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事件删除事件