GoogleMapsAPI基础.ppt

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 i 10 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 message number 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 i 5 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提供了独立