GoogleMapsAPI基础.ppt

Google Maps API 基 础 (1) 谢健文 华南农业大学信息学院 1. Google Maps API 概述 Google Maps Google Maps 简介简介 Google Maps Google Maps 开发工具开发工具 什么是什么是Google Maps APIGoogle Maps API 如何学习如何学习Google Maps APIGoogle Maps API Google maps 用于GPS导航 Google Maps 简介 在浏览器中展现包含地理信息的数据 可拖动放缩的地图 卫星地图，地形图，街景图，实时交通 地址定位，周边搜索，驾车路线，公交查 询 更多Maps 产品 GoogleEarth 手机版本(GMM) GoogleSky Google Maps Google Maps 开发工具开发工具 Maps API Maps API 迷你地图迷你地图( (MappletsMapplets) ) 我的地图我的地图( (MyMapsMyMaps) ) KML KML Maps API for Flash Maps API for Flash Earth API Earth API Static Maps APIStatic Maps API Google Maps API 使您能够使用 JavaScript 将 Google 地图嵌入自己的网页中。API 提供了大 量实用工具用以处理地图，并通过各种服务向地 图添加内容，从而使您能够在您的网站上创建功 能强大的地图应用程序。 地图 API 是一项免费的测试版服务，在客户可 免费访问的任何网站上均可使用。 什么是什么是Google Maps API ?Google Maps API ? 什么是什么是Google Maps API ?Google Maps API ? 基于Javascript 的函数/类库 在你的网站中嵌入Google地图 将你的数据与地图融合呈现 创建标记，信息窗口，折线，多边形等 KML 与GeoRSS 的支持 在你的网站中使用GoogleMaps 的各种功 能 地址定位，周边搜索，驾车查询等 Google Maps 二次开发平台 创建新的地图组件 个性化地图 版本与费用 完全免费！如果 你的网站服务对用户完全免费 在地图上保留Google的标志 50000 次/天 地址定位查询 开发的东西有创意 企业版 无限量地址定位查询 可以运行在收费网站 可以运行在防火墙后面或企业局域网 取来自Google的技术支持 Google Maps API Google Maps API 应用实例应用实例 如何学习如何学习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 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 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“); 构造函数 描述 GMap2(container, opts?)在给定的 HTML container（通常是 DIV 元素）中创建新的地图。还可 以传递类 型为 GMap2Options 的 可选参数 opts。 初始化地图 初始化通过地图的 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 #“ + 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 缩 放级别为：“ + 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 也创建和分派自己的事件，它取决于当前使用的特定浏 览器事件模型。如果要捕获并响应这些事件，Google 地图API 提供了独立于浏览器的包装器来侦听和绑定 DOM 事件，而无 需定制代码。 GEvent.addDomListener() 静态方法可以为 DOM 节点上的 DOM 事件注册事件处理程序。类似地，静态方法 GEvent.bindDom() 允许您为类实例上的 DOM 事件注册事件处理程序。 删除事件侦听器 不再需要一个事件侦听器时，应将其删除。 以下实例通过在地图上添加标记的方式来响应单击。之 后的任何单击将会删除该事件侦听器。请注意，结果将 不再执行 removeOverlay() 代码。 function MyApplication() this.counter = 0; this.map = new GMap2(document.getElementById(“map_canvas“); this.map.setCenter(new GLatLng(39.917,116.397), 14); var myEventListener = GEvent.bind(this.map, “click“, this, function(marker,latlng) if (this.counter = 0) if (latlng) th