GoogleMapsAPI基础1.ppt

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