• 1. Google 地图 API谷歌地图应用说明 Michael-Tian
  • 2. 内容概述基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 参考资料 Demo
  • 3. 基础知识Google 地图 API 概念 Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化地图 加载地图
  • 4. 基础知识什么是 Google 地图 API? Google 地图 API是一种通过 JavaScript 将 Google 地图嵌入到您的网页的API。它提供了很多处理地图的功能(类似网页 http://ditu.google.cn 上的那些功能)和向地图添加内容的服务,让您能够在您的网站上创建功能全面的地图应用。 任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。
  • 5. 基础知识Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京的故宫博物院为中心的 500x300 的地图。 显示例图 显示代码
  • 6. 基础知识
  • 7. 基础知识 Google Maps JavaScript API Example
  • 8. 基础知识加载 Google 地图 API当地图发布时,必须使用发布地图的网址来注册API,同时sensor 参数也必须明确指明true 或 false,否则地图不能被加载。
  • 9. 基础知识地图 DOM 元素
    要让地图在网页上显示,必须为其留出一个位置。通常,我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。 在上述示例中,我们定义名为“map_canvas”的 div,并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸,除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。
  • 10. 基础知识GMap2 - 基本对象var map = new GMap2(document.getElementById("map_canvas"));GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。(可以创建此类的多个实例,每个对象将在页面上定义一个不同的地图。)我们使用 JavaScript new 操作符创建此类的一个新实例。
  • 11. 基础知识初始化地图map.setCenter(new GLatLng(39.9493, 116.3975), 13);初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。
  • 12. 基础知识加载地图onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化。请参阅地图事件和事件监听器以了解更多信息。 GUnload() 函数是用来防止内存泄漏的实用工具函数。
  • 13. 正向标注Map2类 谷歌可视化API GClientGeocoder 类 GMarker 类 GLatLng 类 函数 GDownloadUrl 可拖动的标记 手动标注 自动标注 随机生成 读XML文件
  • 14. 正向标注Map2类 对 GMap2 类进行实例化以创建地图。这是 API 中的中心类。其他都是辅助类。
  • 15. 正向标注谷歌可视化API Google 可视化 API 使您可以访问您可以显示的结构化数据的多个源(从大范围可视化选择范围内选择)。Google 可视化 API 还提供了一个可以用来创建、共享和重复使用开发人员社区详细编写的可视化内容的平台。 DataTable:该DataTable对象是用来保存到一个可视化传递的数据。DataTable是一个基本的二维表。每一列的所有数据必须具有相同的数据类型。
  • 16. 正向标注GClientGeocoder 类 此类用于和 Google 服务器建立直接通信,以获取用户指定地址的地址解析。 getLocations(query:String|GLatLng, callback:function)
  • 17. 正向标注GMarker 类 GMarker 标记地图上的位置。它实现 GOverlay 接口,因此可使用 GMap2.addOverlay() 方法添加到地图中。 默认图标:
  • 18. 正向标注GLatLng 类 GLatLng 是以经度和纬度表示的地理坐标点。 请注意,尽管进行地图投影时通常将经度与 x 坐标相关联,将纬度与 y 坐标相关联,但总是先填写纬度坐标,后填写经度坐标,因为这符合绘图习惯。
  • 19. 正向标注函数 GDownloadUrl 此函数提供一种便利方式,可异步检索按网址标识的资源。请注意,由于 XmlHttpRequest 对象用于执行请求,因此它受跨站脚本的同源限制,即网址必须指向与当前执行此代码的文档的网址相同的服务器。因此,对 url 参数使用绝对网址通常是多余的,最好仅使用绝对或相对路径。处理抛出的任何异常(如安全错误)都是调用者的职责。
  • 20. 正向标注可拖动的标记 标记是可以点击和拖动到新位置的交互式对象。 默认情况下,标记可点击但不可拖动,所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。 var marker = new GMarker(center, {draggable: true});
  • 21. 正向标注手动标注 左键单击地图添加标记,并取得当前标记的坐标,然后将信息添加到一个列表中,这个列表使用了谷歌可视化技术;最后为地图添加一个事件侦听器,取得坐标的详细信息。 首先创建一个数据表 var visualization = new google.visualization.Table(document.getElementById(‘table_canvas’)); 为地图添加一个单击事件侦听 GEvent.addListener(map, 'click', function(overlay, latlng)
  • 22. 正向标注自动标注-随机生成 通过随机生成经纬坐标来实现。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)); }
  • 23. 正向标注自动标注-读XML文件 读取XML文件需要用到GdownloadUrl函数,使用它来读取XML文件中的 节点来取得标记的坐标。 XML 文件格式如下:显示代码
  • 24. 正向标注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(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); map.addOverlay(new GMarker(point, { draggable: true } )); } });
  • 25. 反向标注从Marker到列表 从列表到Marker 显示例图
  • 26. 反向标注从Marker到列表 当选中Marker时,对应的列表行将会被选中,颜色会改变,这里称之为“行选中状态”,要实现此功能需要给标注点添加一个click事件侦听,然后调用visualization.setSelection方法。GEvent.addListener(marker, "click", function() { var selectRow = marker.title – 1; visualization.setSelection([{ 'row': selectRow}]); });
  • 27. 反向标注从列表到Marker 要实现点击列表的某一行,行对应的Marker提示信息,需要为列表添加一个事件侦听器,来响应列表行的选中事件,行选中状态时,被选中行的颜色会改变到Marker
  • 28. 反向标注
  • 29. 任意多边形GPolyline 类 GLatLngBounds 类 矩形选择 可调的多边形 样式设置 顶点数据获取 不可调的多边形
  • 30. 任意多边形GPolyline 类 这是一种使用浏览器的矢量制图工具(如果可用)在地图上绘制折线的地图叠加层,或者是来自 Google 服务器的图像叠加层。
  • 31. 任意多边形GLatLngBounds 类 GLatLngBounds 实例在地理坐标中代表矩形,包括与 180 度子午线相交的矩形。
  • 32. 任意多边形矩形选择 在地图上绘制一个矩形,在结束绘制时(mouseup事件)将包含在矩形内的所有坐标点显示出来,然后将地图平移到矩形的中心位置。使用GLatLngBounds类的containsLatLng方法判断坐标点是否在矩形内。 显示例图
  • 33. 任意多边形
  • 34. 任意多边形可调的多边形-样式设置 使用Gpolyline类向地图添加多边形,使用Gpolyline绘制多边形的原理是向地图添加N个坐标点,N >=3,把起点与终点设置为同一个点,然后将这些点连接起来,这样就可以绘制出一个多边形。如果想让多边形变成可调整状态,需要添加一个方法enableEditing。 显示图例
  • 35. 任意多边形
  • 36. 任意多边形可调的多边形-顶点数据获取 通过polygon.getVertexCount()方法取得多边形的顶点总数,然后循环调用polygon.getVertex()方法取得每个顶点的经纬坐标值。
  • 37. 任意多边形不可调的多边形 不可调的多边形创建方法与可调多边形是一样的,只是却掉polygon.enableEditing() 属性即可。 显示例图
  • 38. 任意多边形
  • 39. 自定义GMarkerGMarker添加文字 添加滑动门效果 自定义图片无效果
  • 40. 自定义GMarkerGMarker添加文字 想为GMarker添加文字,就需要定义一个新的类,这个类继承GMarker,然后在这个新类中添加一个DIV,DIV.innerHTML的值就是用来显示GMarker上面的文字。 显示例图
  • 41. 自定义GMarker
  • 42. 自定义GMarker添加滑动门效果 这里要实现的滑动门效果就是当鼠标移动到标记上,图标会向右展开来显示里面的内容,当鼠标离开标记时,标记会向左缩进,回复原来的样子。实现这种效果用到的技术是DIV+CSS。 原理 为标记添加 mouseover、mouseout事件。 mouseover时,将DIV的display属性设置为空。 mouseout时,将DIV的display属性设置为none。 显示例图
  • 43. 自定义GMarker
  • 44. 自定义GMarker自定义图片无效果 最简单的实现方式是使用 GIcon 类的构造函数“复制”已有的图标(比如 G_DEFAULT_ICON,将其作为 GIcon 的 copy 参数),它将复制该图标所有的默认属性,然后您可以对其进行自定义。 显示例图
  • 45. 自定义GMarker
  • 46. 地图控件与地图属性控件概述 http://ditu.google.cn 上的地图包含允许用户与地图交互的 UI 元素,这些元素称为“控件”。 GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。 GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。 GSmallZoomControl - 小型缩放控件(无平移控件),用于在 Google 地图上显示行车路线的小地图弹出窗口。 GScaleControl - 地图比例尺 GMapTypeControl - 让用户切换地图类型(例如“地图”和“卫星”)的按钮 GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。 GOverviewMapControl - 位于屏幕一角的可折叠概览地图。
  • 47. 空间数据类型SQL Server 2008 支持用于存储空间数据的 geometry 和 geography 数据类型。这些类型支持用来创建、比较、分析和检索空间数据的方法和属性。 geometry 数据类型支持平面或欧几里得(平面球)数据。geometry 数据类型符合适用于 SQL 规范的开放地理空间联盟 (OGC) 简单特征 1.1.0 版。 geography 数据类型,该数据类型可存储诸如 GPS 纬度和经度坐标之类的椭圆体(圆球)数据。 geometry 和 geography 数据类型支持十一种空间数据对象或实例类型。 可实例化类型以蓝色表示。
  • 48. 参考资料谷歌Gmap API官方网站: http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html 谷歌Gmap API官方论坛: http://groups.google.com/group/google-maps-api-china/topics?start=160&sa=N
  • 49. DemoDemo
  • 50. Thank you