Google Map API谷歌地图.ppt

Google地图API 谷歌地图应用说明Michael Tian 内容概述 基础知识正向标注反向标注任意多边形自定义GMarker地图控件与地图属性空间数据类型参考资料Demo 基础知识 Google地图API概念Google地图的 Hello World 加载Google地图API地图DOM元素GMap2 基本对象初始化地图加载地图 基础知识 什么是Google地图API Google地图API是一种通过JavaScript将Google地图嵌入到您的网页的API 它提供了很多处理地图的功能 类似网页上的那些功能 和向地图添加内容的服务 让您能够在您的网站上创建功能全面的地图应用 任何Google地图API应用程序中的基础元素都是 地图 本身 本文档讨论GMap2基础对象的用法和地图操作的基础知识 基础知识 Google地图的 Hello World 开始学习Google地图API最简单的方式是看一个简单的示例 下面的网页显示以北京的故宫博物院为中心的500 x300的地图 显示例图显示代码 基础知识 基础知识 GoogleMapsJavaScriptAPIExamplefunctioninitialize if GBrowserIsCompatible varmap newMap2 document getElementById map canvas map setCenter newGLatLng 39 9493 116 3975 13 基础知识 加载Google地图API 当地图发布时 必须使用发布地图的网址来注册API 同时sensor参数也必须明确指明true或false 否则地图不能被加载 基础知识 地图DOM元素 要让地图在网页上显示 必须为其留出一个位置 通常 我们通过创建名为div的元素并在浏览器的文档对象模型 DOM 中获取此元素的引用执行此操作 在上述示例中 我们定义名为 map canvas 的div 并使用样式属性设置其尺寸 地图会自动使用容器尺寸调整自身的尺寸 除非使用构造函数中的GMapOptions显式地为地图指定尺寸 基础知识 GMap2 基本对象 varmap newGMap2 document getElementById map canvas GMap2类是表示地图的JavaScript类 此类的对象在页面上定义单个地图 可以创建此类的多个实例 每个对象将在页面上定义一个不同的地图 我们使用JavaScriptnew操作符创建此类的一个新实例 基础知识 初始化地图 map setCenter newGLatLng 39 9493 116 3975 13 初始化通过地图的setCenter 方法完成 setCenter 方法要求有GLatLng坐标和缩放级别 而且必须先发送此方法 然后再在地图上执行其他任何操作 包括设置地图本身的其他任何属性 基础知识 加载地图 onload属性是事件处理程序的示例 Google地图API还提供了大量事件可以用来 监听 状态变化 请参阅地图事件和事件监听器以了解更多信息 GUnload 函数是用来防止内存泄漏的实用工具函数 正向标注 Map2类谷歌可视化APIGClientGeocoder类GMarker类GLatLng类函数GDownloadUrl可拖动的标记手动标注自动标注随机生成读XML文件 正向标注 Map2类对GMap2类进行实例化以创建地图 这是API中的中心类 其他都是辅助类 正向标注 谷歌可视化APIGoogle可视化API使您可以访问您可以显示的结构化数据的多个源 从大范围可视化选择范围内选择 Google可视化API还提供了一个可以用来创建 共享和重复使用开发人员社区详细编写的可视化内容的平台 DataTable 该DataTable对象是用来保存到一个可视化传递的数据 DataTable是一个基本的二维表 每一列的所有数据必须具有相同的数据类型 正向标注 GClientGeocoder类此类用于和Google服务器建立直接通信 以获取用户指定地址的地址解析 getLocations query String GLatLng callback function 正向标注 GMarker类GMarker标记地图上的位置 它实现GOverlay接口 因此可使用GMap2 addOverlay 方法添加到地图中 默认图标 正向标注 GLatLng类GLatLng是以经度和纬度表示的地理坐标点 请注意 尽管进行地图投影时通常将经度与x坐标相关联 将纬度与y坐标相关联 但总是先填写纬度坐标 后填写经度坐标 因为这符合绘图习惯 正向标注 函数GDownloadUrl此函数提供一种便利方式 可异步检索按网址标识的资源 请注意 由于XmlHttpRequest对象用于执行请求 因此它受跨站脚本的同源限制 即网址必须指向与当前执行此代码的文档的网址相同的服务器 因此 对url参数使用绝对网址通常是多余的 最好仅使用绝对或相对路径 处理抛出的任何异常 如安全错误 都是调用者的职责 正向标注 可拖动的标记标记是可以点击和拖动到新位置的交互式对象 默认情况下 标记可点击但不可拖动 所以它们需要通过将额外的标记选项draggable设置为true来初始化 varmarker newGMarker center draggable true 正向标注 手动标注左键单击地图添加标记 并取得当前标记的坐标 然后将信息添加到一个列表中 这个列表使用了谷歌可视化技术 最后为地图添加一个事件侦听器 取得坐标的详细信息 首先创建一个数据表varvisualization newgoogle visualization Table document getElementById table canvas 为地图添加一个单击事件侦听GEvent addListener map click function overlay latlng 正向标注 自动标注 随机生成通过随机生成经纬坐标来实现 for vari 0 i 10 i varpoint newGLatLng southWest lat latSpan Math random southWest lng lngSpan Math random map addOverlay newGMarker point 正向标注 自动标注 读XML文件读取XML文件需要用到GdownloadUrl函数 使用它来读取XML文件中的节点来取得标记的坐标 XML文件格式如下 显示代码 正向标注 GDownloadUrl XML data xml function data responseCode varxml GXml parse data varmarkers xml documentElement getElementsByTagName marker for vari 0 i markers length i varpoint newGLatLng parseFloat markers i getAttribute lat parseFloat markers i getAttribute lng map addOverlay newGMarker point draggable true 反向标注 从Marker到列表从列表到Marker显示例图 反向标注 从Marker到列表当选中Marker时 对应的列表行将会被选中 颜色会改变 这里称之为 行选中状态 要实现此功能需要给标注点添加一个click事件侦听 然后调用visualization setSelection方法 GEvent addListener marker click function varselectRow marker title 1 visualization setSelection row selectRow 反向标注 从列表到Marker要实现点击列表的某一行 行对应的Marker提示信息 需要为列表添加一个事件侦听器 来响应列表行的选中事件 行选中状态时 被选中行的颜色会改变到Marker 反向标注 任意多边形 GPolyline类GLatLngBounds类矩形选择可调的多边形样式设置顶点数据获取不可调的多边形 任意多边形 GPolyline类这是一种使用浏览器的矢量制图工具 如果可用 在地图上绘制折线的地图叠加层 或者是来自Google服务器的图像叠加层 任意多边形 GLatLngBounds类GLatLngBounds实例在地理坐标中代表矩形 包括与180度子午线相交的矩形 任意多边形 矩形选择在地图上绘制一个矩形 在结束绘制时 mouseup事件 将包含在矩形内的所有坐标点显示出来 然后将地图平移到矩形的中心位置 使用GLatLngBounds类的containsLatLng方法判断坐标点是否在矩形内 显示例图 任意多边形 任意多边形 可调的多边形 样式设置使用Gpolyline类向地图添加多边形 使用Gpolyline绘制多边形的原理是向地图添加N个坐标点 N 3 把起点与终点设置为同一个点 然后将这些点连接起来 这样就可以绘制出一个多边形 如果想让多边形变成可调整状态 需要添加一个方法enableEditing 显示图例 任意多边形 任意多边形 可调的多边形 顶点数据获取通过polygon getVertexCount 方法取得多边形的顶点总数 然后循环调用polygon getVertex 方法取得每个顶点的经纬坐标值 任意多边形 不可调的多边形不可调的多边形创建方法与可调多边形是一样的 只是却掉polygon enableEditing 属性即可 显示例图 任意多边形 自定义GMarker GMarker添加文字添加滑动门效果自定义图片无效果 自定义GMarker GMarker添加文字想为GMarker添加文字 就需要定义一个新的类 这个类继承GMarker 然后在这个新类中添加一个DIV DIV innerHTML的值就是用来显示GMarker上面的文字 显示例图 自定义GMarker 自定义GMarker 添加滑动门效果这里要实现的滑动门效果就是当鼠标移动到标记上 图标会向右展开来显示里面的内容 当鼠标离开标记时 标记会向左缩进 回复原来的样子 实现这种效果用到的技术是DIV CSS 原理为标记添加mouseover mouseout事件 mouseover时 将DIV的display属性设置为空 mouseout时 将DIV的display属性设置为none 显示例图 自定义GMarker 自定义GMarker 自定义图片无效果最简单的实现方式是使用GIcon类的构造函数 复制 已有的图标 比如G DEFAULT ICON 将其作为GIcon的copy参数 它将复制该图标所有的默认属性 然后您可以对其进行自定义 显示例图 自定义GMarker 地图控件与地图属性 控件概述上的地图包含允许用户与地图交互的UI元素 这些元素称为 控件 GLargeMapControl 一个在Google地图上使用的大平移 缩放控件 默认情况下显示在地图的左上角 GSmallMapControl 一个在Google地图上使用的小一点的平移 缩放控件 默认情况下显示在地图的左上角 GSmallZoomControl 小型缩放控件 无平移控件 用于在Google地图上显示行车路线的小地图弹出窗口 GScaleControl 地图比例尺GMapTypeControl 让用户切换地图类型 例如 地图 和 卫星 的按钮GHierarchicalMapTypeControl 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项 GOverviewMapControl 位于屏幕一角的可折叠概览地图 空间数据类型 SQLServer2008支持用于存储空间数据的geom