Google_Map_API谷歌地图.ppt

1、Google 地图 API,谷歌地图应用说明 Michael-Tian,内容概述,基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 参考资料 Demo,基础知识,Google 地图 API 概念 Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图,基础知识,什么是 Google 地图 API？ Google 地图 API是一种通过 JavaScript 将 Google 地图嵌入到您的网页的API。它提供了很多处理地图的功能（类似网页 上的那些功能

2、）和向地图添加内容的服务，让您能够在您的网站上创建功能全面的地图应用。 任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。,基础知识,Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的 500 x300 的地图。 显示例图 显示代码,基础知识,基础知识, Google Maps JavaScript API Example function initialize() if (GBrowserIsCompa

3、tible() var map = new Map2(document.getElementById(map_canvas); map.setCenter(new GLatLng(39.9493, 116.3975), 13); ,基础知识,加载 Google 地图 API, ,当地图发布时，必须使用发布地图的网址来注册API，同时sensor 参数也必须明确指明true 或 false，否则地图不能被加载。,基础知识,地图 DOM 元素,要让地图在网页上显示，必须为其留出一个位置。通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。 在上

4、述示例中，我们定义名为“map_canvas”的 div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。,基础知识,GMap2 - 基本对象,var map = new GMap2(document.getElementById(map_canvas);,GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）我们使用 JavaScript new 操作符创建此类的一个新实例。,基础知识,初始化地图,map.set

5、Center(new GLatLng(39.9493, 116.3975), 13);,初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。,基础知识,加载地图,onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。 GUnload() 函数是用来防止内存泄漏的实用工具函数。,正向标注,Map2类 谷歌可视化API GClientGeocoder

6、 类 GMarker 类 GLatLng 类 函数 GDownloadUrl 可拖动的标记 手动标注 自动标注 随机生成 读XML文件,正向标注,Map2类 对 GMap2 类进行实例化以创建地图。这是 API 中的中心类。其他都是辅助类。,正向标注,谷歌可视化API Google 可视化 API 使您可以访问您可以显示的结构化数据的多个源（从大范围可视化选择范围内选择）。Google 可视化 API 还提供了一个可以用来创建、共享和重复使用开发人员社区详细编写的可视化内容的平台。 DataTable：该DataTable对象是用来保存到一个可视化传递的数据。DataTable是一个基本的二维

7、表。每一列的所有数据必须具有相同的数据类型。,正向标注,GClientGeocoder 类 此类用于和 Google 服务器建立直接通信，以获取用户指定地址的地址解析。 getLocations(query:String|GLatLng, callback:function),正向标注,GMarker 类 GMarker 标记地图上的位置。它实现 GOverlay 接口，因此可使用 GMap2.addOverlay() 方法添加到地图中。 默认图标：,正向标注,GLatLng 类 GLatLng 是以经度和纬度表示的地理坐标点。 请注意，尽管进行地图投影时通常将经度与 x 坐标相关联，将纬度与

8、 y 坐标相关联，但总是先填写纬度坐标，后填写经度坐标，因为这符合绘图习惯。,正向标注,函数 GDownloadUrl 此函数提供一种便利方式，可异步检索按网址标识的资源。请注意，由于 XmlHttpRequest 对象用于执行请求，因此它受跨站脚本的同源限制，即网址必须指向与当前执行此代码的文档的网址相同的服务器。因此，对 url 参数使用绝对网址通常是多余的，最好仅使用绝对或相对路径。处理抛出的任何异常（如安全错误）都是调用者的职责。,正向标注,可拖动的标记 标记是可以点击和拖动到新位置的交互式对象。 默认情况下，标记可点击但不可拖动，所以它们需要通过将额外的标记选项 draggable

9、设置为 true 来初始化。 var marker = new GMarker(center, draggable: true);,正向标注,手动标注 左键单击地图添加标记，并取得当前标记的坐标，然后将信息添加到一个列表中，这个列表使用了谷歌可视化技术；最后为地图添加一个事件侦听器，取得坐标的详细信息。 首先创建一个数据表 var visualization = new google.visualization.Table(document.getElementById(table_canvas); 为地图添加一个单击事件侦听 GEvent.addListener(map, click, fu

10、nction(overlay, latlng),正向标注,自动标注-随机生成 通过随机生成经纬坐标来实现。,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); ,正向标注,自动标注-读XML文件 读取XML文件需要用到GdownloadUrl函数，使用它来读取XML文件中的 节点来取得标记的坐标。, ,XML

11、 文件格式如下：,显示代码,正向标注,GDownloadUrl(XML/data.xml, function(data, responseCode) var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName(marker); for (var i = 0; i markers.length; i+) var point = new GLatLng(parseFloat(markersi.getAttribute(lat), parseFloat(markersi.getAttribute

12、(lng); map.addOverlay(new GMarker(point, draggable: true ); );,反向标注,从Marker到列表 从列表到Marker 显示例图,反向标注,从Marker到列表 当选中Marker时，对应的列表行将会被选中，颜色会改变，这里称之为“行选中状态”，要实现此功能需要给标注点添加一个click事件侦听，然后调用visualization.setSelection方法。,GEvent.addListener(marker, click, function() var selectRow = marker.title 1; visualizat

13、ion.setSelection( row: selectRow); );,反向标注,从列表到Marker 要实现点击列表的某一行，行对应的Marker提示信息，需要为列表添加一个事件侦听器，来响应列表行的选中事件，行选中状态时，被选中行的颜色会改变到Marker,反向标注,任意多边形,GPolyline 类 GLatLngBounds 类 矩形选择 可调的多边形 样式设置 顶点数据获取 不可调的多边形,任意多边形,GPolyline 类 这是一种使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层，或者是来自 Google 服务器的图像叠加层。,任意多边形,GLatLngBoun

14、ds 类 GLatLngBounds 实例在地理坐标中代表矩形，包括与 180 度子午线相交的矩形。,任意多边形,矩形选择 在地图上绘制一个矩形，在结束绘制时（mouseup事件）将包含在矩形内的所有坐标点显示出来，然后将地图平移到矩形的中心位置。使用GLatLngBounds类的containsLatLng方法判断坐标点是否在矩形内。 显示例图,任意多边形,任意多边形,可调的多边形样式设置 使用Gpolyline类向地图添加多边形，使用Gpolyline绘制多边形的原理是向地图添加N个坐标点，N =3，把起点与终点设置为同一个点，然后将这些点连接起来，这样就可以绘制出一个多边形。如果想让多边

15、形变成可调整状态，需要添加一个方法enableEditing。 显示图例,任意多边形,任意多边形,可调的多边形顶点数据获取 通过polygon.getVertexCount()方法取得多边形的顶点总数，然后循环调用polygon.getVertex()方法取得每个顶点的经纬坐标值。,任意多边形,不可调的多边形 不可调的多边形创建方法与可调多边形是一样的，只是却掉polygon.enableEditing() 属性即可。 显示例图,任意多边形,自定义GMarker,GMarker添加文字 添加滑动门效果 自定义图片无效果,自定义GMarker,GMarker添加文字 想为GMarker添加文字，

16、就需要定义一个新的类，这个类继承GMarker，然后在这个新类中添加一个DIV，DIV.innerHTML的值就是用来显示GMarker上面的文字。 显示例图,自定义GMarker,自定义GMarker,添加滑动门效果 这里要实现的滑动门效果就是当鼠标移动到标记上，图标会向右展开来显示里面的内容，当鼠标离开标记时，标记会向左缩进，回复原来的样子。实现这种效果用到的技术是DIV+CSS。 原理 为标记添加 mouseover、mouseout事件。 mouseover时，将DIV的display属性设置为空。 mouseout时，将DIV的display属性设置为none。 显示例图,自定义GM

17、arker,自定义GMarker,自定义图片无效果 最简单的实现方式是使用 GIcon 类的构造函数“复制”已有的图标（比如 G_DEFAULT_ICON，将其作为 GIcon 的 copy 参数），它将复制该图标所有的默认属性，然后您可以对其进行自定义。 显示例图,自定义GMarker,地图控件与地图属性,控件概述 上的地图包含允许用户与地图交互的 UI 元素，这些元素称为“控件”。 GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。 GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩

18、放控件。默认情况下显示在地图的左上角。 GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。 GScaleControl - 地图比例尺 GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮 GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。 GOverviewMapControl - 位于屏幕一角的可折叠概览地图。,空间数据类型,SQL Server 2008 支持用于存储空间数据的 geometry 和 geography 数据