Google 地图 API


Google Map API 谷歌地图 Michael Tian Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 目录 Google Map API ....................................................................................................................4 1 基础知识 ...........................................................................................................................4 1.1 Google 地图 API 概念 ...........................................................................................4 1.2 Google 地图的“Hello, World”..........................................................................4 1.2.1 加载 Google 地图 API....................................................................................6 1.2.2 地图 DOM 元素 .................................................................................................6 1.2.3 GMap2 - 基本对象 ...........................................................................................6 1.2.4 初始化地图.......................................................................................................7 1.2.5 加载地图...........................................................................................................7 2 正向标注 ...........................................................................................................................8 2.1 Map2 类 .....................................................................................................................8 2.2 谷歌可视化 API.........................................................................................................9 2.3 GClientGeocoder 类 ...............................................................................................9 构造函数 ......................................................................................................................9 方法..............................................................................................................................9 2.4 GMarker 类.............................................................................................................11 构造函数 ....................................................................................................................12 方法............................................................................................................................12 事件............................................................................................................................12 2.5 GLatLng 类.............................................................................................................13 构造函数 ....................................................................................................................13 2.6 函数 GDownloadUrl................................................................................................13 2.7 可拖动的标记..........................................................................................................14 2.8 手动标注 .................................................................................................................14 2.9 自动标注 .................................................................................................................15 2.9.1 随机生成..........................................................................................................15 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 2.9.2 读 XML 文件......................................................................................................17 3 反向标注 .........................................................................................................................19 3.1 从 Marker 到列表....................................................................................................19 3.2 从列表到 Mark.........................................................................................................20 4 任意多边形 .....................................................................................................................22 4.1 GPolyline 类.........................................................................................................22 构造函数 ....................................................................................................................22 方法............................................................................................................................22 4.2 GLatLngBounds 类.................................................................................................23 构造函数 ....................................................................................................................23 方法............................................................................................................................23 4.3 矩形选择 .................................................................................................................23 4.4 可调的多边形..........................................................................................................25 4.4.1 样式设置..........................................................................................................27 4.4.2 顶点数据获取..................................................................................................27 4.5 不可调的多边形......................................................................................................29 5 自定义 GMarker...............................................................................................................29 5.1 GMarker 添加文字..................................................................................................31 5.2 添加滑动门效果......................................................................................................32 5.3 自定义图片无效果..................................................................................................34 6 地图控件与地图属性......................................................................................................34 控件概述 ........................................................................................................................34 7 空间数据类型..................................................................................................................36 8 参考资料 .........................................................................................................................36 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. Google Map API 1 基础知识 1.1 Google 地图 API 概念 欢迎阅读 Google 地图 API 开发人员文档!Google 地图 JavaScript API 使您可以在网 页中嵌入 Google 地图。要使用该 API,您需要先注册以获取 API 密钥。收到 API 密钥之后, 即可以按照本文档中的说明开发地图应用程序。 任何 Google 地图 API 应用程序中的基础元素都是“地图”本身。本文档讨论 GMap2 基础对象的用法和地图操作的基础知识。 1.2 Google 地图的“Hello, World” 开始学习 Google 地图 API 最简单的方式是看一个简单的示例。下面的网页显示以北京 的故宫博物院为中心的 500x300 的地图。 Google Maps JavaScript API Example Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
您可以查看此示例及下载、编辑和调试该示例,但必须将该文件中的密钥替换为您自己的 Google 地图 API 密钥。(如果注册了特定目录的密钥,也可以将其用于所有子目录。) 程序运行效果图如下: 即使在此简单的示例中,也需要注意五点: 1. 使用 script 标签包含 Google 地图 API JavaScript。 2. 创建名为“map_canvas”的 div 元素来包含地图。 3. 编写 JavaScript 函数创建“map”对象。 4. 将地图的中心设置为指定的地理点。 5. 从 body 标签的 onLoad 事件初始化地图对象。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 1.2.1 加载 Google 地图 API http://ditu.google.cn/maps?file=api&v=2&key=abcdefg 网址指向包含使用 Google 地 图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签,使用注册 API 时收到的密钥。在此示例中,该密钥显示为“abcdefg”。 请注意,我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示 例中,我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。  当地图发布时,必须使用发布地图的网址来注册 API,同时 sensor 参数也必须明确指明 true 或 false,否则地图不能被加载。 1.2.2 地图 DOM 元素
要让地图在网页上显示,必须为其留出一个位置。通常,我们通过创建名为 div 的元素并在浏 览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。 在上述示例中,我们定义名为“map_canvas”的 div,并使用样式属性设置其尺寸。地图会自 动使用容器尺寸调整自身的尺寸,除非使用构造函数中的 GMapOptions 显式地为地图指定尺 寸。 1.2.3 GMap2 - 基本对象 var map = new GMap2(document.getElementById("map_canvas")); GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。(可以创建此类 的多个实例,每个对象将在页面上定义一个不同的地图。)我们使用 JavaScript new 操作符 创建此类的一个新实例。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 当创建新的地图实例时,在页面中指定一个 DOM 节点(通常是 div 元素)作为地图的容器。 HTML 节点是 JavaScript document 对象的子对象,而且我们通过 document.getElementById() 方法获得该元素的引用。 此代码定义了一个变量(名为 map),并将新 GMap2 对象赋值给该变量。函数 GMap2() 称 为“构造函数”,其定义(在 Google 地图 API 参考中简述)如下所示: 构造函数 说明 GMap2(container, opts?) 在通常是一个 DIV 元素的指定 HTML container 内创建新 地图。您也可以通过 opts 参数传递 GMap2Options 类型 的可选参数。 请注意因为 JavaScript 是松散类型的语言,我们可以不填写构造函数的任何可选参数,此处也 未这样做。 1.2.4 初始化地图 map.setCenter(new GLatLng(39.9493, 116.3975), 13); 通过 GMap2 构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别,而且必须先发送 此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。 1.2.5 加载地图 当 HTML 页面显示时,文档对象模型 (DOM) 即会扩展,接收其他外部图像和脚本并将其合 并到 document 对象中。为确保我们的地图仅放置在完全加载后的页面上,我们仅在 HTML 页面的 元素收到 onload 事件后才执行构造 GMap2 对象的函数。这样做可以避免 出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。 onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听” 状态变化。请参阅地图事件和事件监听器以了解更多信息。 GUnload() 函数是用来防止内存泄漏的实用工具函数。 本节完整参考代码: map-simple.rar Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 2 正向标注 这里指的正向标注,就是鼠标左键点击地图上某一个点,为这个点添加一个标记,添加标 记的同时,在地图旁边的数据列表中记录这个标记的详细信息,如:地区、经纬度等等。 API 还提供从 XMl 文件中读取坐标点向地图添加坐标,使用这种方式可以用很少的时间向 地图批量添加标注。 默认标记如下图所示: 正向标注所需要的技术: 执行顺序 功能实现 所需技术 1 为地图添加 click 事件监听器 Gmap2 类 2 点击地图时取得经度、维度地理坐标 GLatLng 类 3 在得到的坐标上添加标记 GMarker 类 4 取得坐标点的详细地理信息(省、市、区) GClientGeocoder 类 5 将坐标点的详细信息存入数据列表 谷歌可视化 API 6 读取 XML 文件添加标注 GDownloadUrl 函数 7 地图上添加的标记 GMarker 类 2.1 Map2 类 对 GMap2 类进行实例化以创建地图。这是 API 中的中心类。其他都是辅助类。 事件介绍 事件 说明 click(overlay:GOverlay, latlng:GLatLng, overlaylatlng:GLatLng) 用户用鼠标点击地图时会触发此事件。根据所点击的环境的不 同以及是否点击了可点击的叠加层,click 事件会传递不同的参 数。如果点击的不是可点击叠加层,overlay 参数为 null 并且 latlng 参数包含点击点的地理坐标。如果点击的是 clickable 叠 加 层 ( 如 GMarker 、 GPolygon 、 GPolyline 或 GInfoWindow ), overlay 参 数 包 含 叠 加 层 对 象 , 而 overlaylatlng 参数会包含所点击叠加层的坐标。另外,还会在 该叠加层自身上触发 click 事件。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 2.2 谷歌可视化 API Google 可视化 API 使您可以访问您可以显示的结构化数据的多个源(从大范围可视化选 择范围内选择)。Google 可视化 API 还提供了一个可以用来创建、共享和重复使用开发人员 社区详细编写的可视化内容的平台。 谷歌可视化 API 的命名空间是 google.visualization.*;  DataTable:该 DataTable 对象是用来保存到一个可视化传递的数据。DataTable 是一个 基本的二维表。每一列的所有数据必须具有相同的数据类型。  如果您更改 DataTable 后,这些变化不会立即更改图表。调用 draw()反映任何变化。 2.3 GClientGeocoder 类 此类用于和 Google 服务器建立直接通信,以获取用户指定地址的地址解析。另外,地址 解析器可维护自己的地址缓存,可以无需往返于服务器而回答重复的查询。作为常用的最佳做法, 建议不要在回路中使用 GClientGeocoder 函数。有多个地址要进行地址解析的开发人员或许 应改为使用我们的 HTTP 地址解析器。 构造函数 构造函数 说明 GClientGeocoder(cache?:GGeocodeCache) 创建地址解析器的新实例,直接与 Google 服 务器对话。可选的缓存参数允许指定已知地址 的自定义客户端缓存。如果未指定缓存,则使 用 GFactualGeocodeCache。 (自 2.55 开始) 方法 方法 返回 值 说明 getLocations( query:String|GLatLng, callback:function) None 此方法向 Google 地址解析服务发送请求,要求该服务对 指定的 query 进行解析并在指定的 callback 中处理响 应。“地址解析”是指将用户可读的地址转换成经度/纬度 值。Google 地址解析服务还支持“反向地址解析”,其中 提供的地理点会转换成用户可读的地址。要使用此地址解析 服务,请调用此方法将其传递给 query 以进行地址解析。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 如果将查询作为可寻址的 String 提供,则该服务将进行标 准的地址解析。但是,如果 query 包含 GLatLng,则该 服务将进行反转地址解析。此方法需要调用 Google 服务 器,因此您还必须传递 callback 方法以处理响应。此响应 将包含 Status 代码,如果成功,则会包含一个或多个 Placemark 对象。与 GClientGeocoder.getLatLng 方法 不同,此回调函数可以通过检查 Status 字段来确定失败的 原因。 (自 2.55 开始) 3、有了数据表后,如果想让数据表中的数据显示到页面上,需要将这个表绑定到一个页面显示 列表上,还要为这个列表添加一个行选择事件侦听器,用来响应“地图反向标注”。 参考代码如下: function showAddress(response) { if (!response || response.Status.code != 200) { alert("Status Code:" + response.Status.code); } else { place = response.Placemark[0]; data.addRows(1); var rwoCount = data.getNumberOfRows(); rwoCount = rwoCount - 1; data.setCell(rwoCount, 0, rwoCount + 1); data.setCell(rwoCount, 1, place.address); data.setCell(rwoCount, 2, cLat); data.setCell(rwoCount, 3, cLng); ++row_no; visualization = new google.visualization.Table(document.getElementById('table_canvas')); visualization.draw(data, null); google.visualization.events.addListener(visualization, 'select', selectHandler); var marker = createMarker(response); marker.title = rwoCount + 1; Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 4、添加创建标注(GMarker)函数: 2.4 GMarker 类 GMarker 标记地图上的位置。它实现 GOverlay 接口,因此可使用 GMap2.addOverlay() 方法添加到地图中。 标记对象包含 latlng(这是标记在地图中锚定的地理位置)和 icon。如果未在构造函数中设置 icon,则会使用默认图标 G_DEFAULT_ICON。 将标记对象添加到地图中后,通过标记可打开该地图的信息窗口。标记对象会触发鼠标事件和信 息窗口事件。 map.addOverlay(marker); markers.push(marker); markersResponse.push(response); } } function createMarker(response) { var point = new GLatLng(cLat, cLng); var marker = new GMarker(point); var myHtml = "orig latlng:" + response.name + "
" +"Reverse Geocoded latlng:" + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + "
" +"Status Code:" + response.Status.code + "
" +"Status Request:" + response.Status.request + "
" + "Address:" + place.address + "
" +"Accuracy:" + place.AddressDetails.Accuracy + "
" + "Country code: " +place.AddressDetails.Country.CountryNameCode; GEvent.addListener(marker, "click", function() { var selectRow = marker.title - 1; visualization.setSelection([{ 'row': selectRow}]); this.openInfoWindowHtml( myHtml); }); return marker; } Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 构造函数 构造函数 说明 GMarker(latlng:GLatLng, opts?:GMarkerOptions) 按 GMarkerOptions 中指定的选项在 latlng 创建标记。 默认情况下,标记是可点击的,并且有默认图标 G_DEFAULT_ICON。(自 2.50 开始) 方法 将标记添加到地图中后,才能调用这些方法。 方法 返回值 说明 openInfoWindowHtml(content:String, opts?:GInfoWindowOptions) None 通过标记图标打开地图信息窗口。信 息窗口的内容为包含 HTML 文本 的字符串。只适用于 GInfoWindowOptions.maxWidth 选项。 事件 只有当标记处于活动状态时,才会触发上述所有事件(请参见构造函数)。 事件 说明 click(latlng:GLatLng) 点击标记图标时会触发此事件,从而通过其 latlng 参数传入 标记的当前坐标。请注意,同时还会使地图触发此事件,将标 记作为第一个参数传递到那里的事件处理程序中。 mousedown(latlng:GLatLng) 在标记图标上触发 DOM mousedown 事件时会触发此事 件,从而通过其 latlng 参数传入标记的当前坐标。请注意, 标记会停止 mousedown DOM 事件,这样就不会导致地图 开始拖动。 mouseup(latlng:GLatLng) 在标记上触发 DOM mouseup 事件时会触发此事件,从而通 过其 latlng 参数传入标记的当前坐标。请注意,标记不会停 止 mousedown DOM 事件,因为它不会干扰地图的拖动处 理程序。 mouseover(latlng:GLatLng) 当鼠标进入标记图标区域时会触发此事件,从而通过其 latlng 参数传入标记的当前坐标。 mouseout(latlng:GLatLng) 当鼠标离开标记图标区域时会触发此事件,从而通过其 latlng 参数传入标记的当前坐标。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. infowindowclose() 关闭通过此标记打开的地图信息窗口时会触发此事件。关闭信 息窗口或在其他标记或在地图上打开信息窗口时,都会触发此 事件。此事件在触发前会触发 infowindowbeforeclose 事 件。 2.5 GLatLng 类 GLatLng 是以经度和纬度表示的地理坐标点。 请注意,尽管进行地图投影时通常将经度与 x 坐标相关联,将纬度与 y 坐标相关联,但 总是先填写纬度坐标,后填写经度坐标,因为这符合绘图习惯。 另请注意,不能修改 GLatLng 的坐标。如果想要计算另一个点,必须新建一个。 构造函数 构造函数 说明 GLatLng(lat:Number, lng:Number, unbounded?:Boolean) 注意纬度和经度的顺序。如果 unbounded 标记为 true, 则将使用传递的数字,否则纬度会限定在 -90 度和 +90 度之间,而经度会限定在 -180 度和 +180 度之间。 2.6 函数 GDownloadUrl 此函数提供一种便利方式,可异步检索按网址标识的资源。请注意,由于 XmlHttpRequest 对象用于执行请求,因此它受跨站脚本的同源限制,即网址必须指向与当前执行此代码的文档的 网址相同的服务器。因此,对 url 参数使用绝对网址通常是多余的,最好仅使用绝对或相对路 径。处理抛出的任何异常(如安全错误)都是调用者的职责。 方法 返回值 说明 GDownloadUrl(url:String, onload:Function, postBody?:String, postContentType?:String) None 从指定的网址中检索资源,然后通过将文档文本作为 第一参数、将 HTTP 响应状态代码作为第二参数来 调用 onload 函数。如果请求超时,则可将 null 作 为第一参数、-1 作为第二参数调用 onload 函数。 此函数在默认情况下会发送 HTTP GET 请求。要发 送 HTTP POST 请求,请传递可选 postBody 参数 中的数据。如果发送的数据的类型不是 “application/x-www-form-urlencoded”,则将 内容类型作为字符串传递到 postContentType 参 数中。此方法受跨站脚本限制。请注意,此方法使用 浏览器的底层 XmlHttpRequest 实现。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 2.7 可拖动的标记 标记是可以点击和拖动到新位置的交互式对象。在此示例中,我们将一个可拖动的标记放 置在地图上,并监听它的几个较简单事件。可拖动标记通过实现以下四类事件来表示其拖动状态: click、dragstart、drag 和 dragend。默认情况下,标记可点击但不可拖动,所以它们需要通 过将额外的标记选项 draggable 设置为 true 来初始化。可拖动标记拖动结束后默认有弹跳效 果。如果不喜欢这种效果,请将 bouncy 选项设置为 false,标记会平缓放下。 var map = new GMap2(document.getElementById("map_canvas")); var center = new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); var marker = new GMarker(center, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("弹起来了..."); }); map.addOverlay(marker); 本节完整参考代码: marker-drag.rar 2.8 手动标注 本节介绍鼠标左键单击地图添加标记,并取得当前标记的坐标,然后将信息添加到一个列 表中,这个列表使用了谷歌可视化技术;最后为地图添加一个事件侦听器,取得坐标的详细信息, 也就是处理地址解析。 1、首先我们先来添加一个 setupTable()函数,这个方法用来创建一个数据表,为这个数据 表添加 4 列,分别存储“序号”、“地区”、“经度”、“纬度”,将此函数添加到 initialize() 函数中第一行的位置上,参考代码如下: function setupTable() { Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 2、为地图添加一个单击事件侦听,代码如下:  需要注意对 latlng 的判断;  根据 latlng 取经、纬度; 2.9 自动标注 自动标注是指通过程序实现在地图上添加标注,这里介绍通过随机生成坐标点添加标注和 读取 XML 文件中的坐标点添加标注。 2.9.1 随机生成 function initialize() { if (GBrowserIsCompatible()) data = new google.visualization.DataTable(); data.addColumn('number', 'Sl. No'); data.addColumn('string', '地区'); data.addColumn('number', '纬度'); data.addColumn('number', '经度'); // Create and draw the visualization. visualization = new google.visualization.Table(document.getElementById('table_canvas')); visualization.draw(data, null); } geocoder = new GClientGeocoder(); GEvent.addListener(map, 'click', function(overlay, latlng) { if (latlng == null || typeof (latlng) == "undefined") { return; } var lat = latlng.lat(); var lon = latlng.lng(); cLat = lat; cLng = lon; geocoder.getLocations(latlng, showAddress);//地址解析 …… }); Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. { 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 < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(new GMarker(point)); } } } 程序运行效果如下图 : Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 本节完整参考代码: map-markers.rar 2.9.2 读 XML 文件 读取 XML 文件需要用到 GdownloadUrl 函数,使用它来读取 XML 文件中的 节 点来取得标记的坐标。 XML 文件内容如下: 说明: 1. lat 属性表示 latitude 纬度 2. lng 属性表示 longitude 经度 参考代码如下: function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(40.000, 116.568), 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 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 程序运行效果如下: 本节完整参考代码: GetXML.rar GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); map.addOverlay(new GMarker(point, { draggable: true })); } }); } } Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 3 反向标注 反向标注就是通过选择数据列表中的行,然后来判断选中行中的数据是地图上的哪个坐标 点,并且通过一个信息窗口来体现出来。 3.1 从 Marker 到列表 当选中 Marker 时,对应的列表行将会被选中,颜色会改变,这里称之为“行选中状态”, 这里介绍一下通过代码来实现行选中状态的方法,此方法应用到当点击了标注点时,在列表中选 中该标记所在行,将该行设置为“选中状态”,要实现此功能需要给标注点添加一个 click 事件侦 听,然后调用 visualization.setSelection 方法。 参考代码如下:  visualization.setSelection([{ 'row': selectRow}]);此处代码作用是整行变为选中状态。 程序运行效果如下: GEvent.addListener(marker, "click", function() { var selectRow = marker.title - 1; visualization.setSelection([{ 'row': selectRow}]); this.openInfoWindowHtml( myHtml); }); Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 本章参考代码:见 3.2 3.2 从列表到 Mark 要实现点击列表的某一行,行对应的 Marker 提示信息,需要为列表添加一个事件侦听器, 来响应列表行的选中事件,行选中状态时,被选中行的颜色会改变,这一点在画面上可以明显的 体现出来。 参考代码如下: google.visualization.events.addListener(visualization,'select', selectHandler); function selectHandler() { var selection = visualization.getSelection(); var lat1; var lng1; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null) { lat1 = data.getValue(item.row, 2); lng1 = data.getValue(item.row, 3); } var point = new GLatLng(lat1, lng1); for (var j = 0; j <= markers.length - 1; j++) { if (markers[j].getPoint().equals(point) == true) { map.panTo(point); var place1 = markersResponse[j].Placemark[0]; var myHtml = "orig latlng:" + markersResponse[j].name + "
" + "Reverse Geocoded latlng:" + place1.Point.coordinates[1] + "," + place1.Point.coordinates[0] + "
" + "Status Code:" + markersResponse[j].Status.code + "
" + "Status Request:" + markersResponse[j].Status.request + "
" + Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.  map.panTo(point);将地图移动到标注点位置;  markers[j].openInfoWindowHtml(myHtml);在当前标注点提示气泡。 程序运行效果如下: 本章参考代码: lat-long-tool_v7.rar "Address:" + place1.address + "
" + "Accuracy:" + place1.AddressDetails.Accuracy + "
" + "Country code: " + place1.AddressDetails.Country.CountryNameCode; markers[j].openInfoWindowHtml(myHtml); break; } } } } Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 4 任意多边形 可以使用 GPolyline 类绘制任意多边形(包括不规则图形),只需要将图形的起点和重点 设置为同一个点即可完成一个封闭的图形,绘制矩形同样可以使用这个类。 4.1 GPolyline 类 这是一种使用浏览器的矢量制图工具(如果可用)在地图上绘制折线的地图叠加层,或者 是来自 Google 服务器的图像叠加层。 构造函数 构造函数 说明 GPolyline(latlngs:GLatLng[], color?:String, weight?:Number, opacity?:Number, opts?:GPolylineOptions) 根据顶点数组创建折线。color 是一个字符串, 包含十六进制数字、HTML 样式的颜色,如 #RRGGBB。weight 是以像素为单位的线宽度。 opacity 为 0 到 1 之间的数字。该线条平滑且 半透明。 方法 方法 返回值 说明 enableEditing(opts?:GPolyEditingOptions)) None 允 许 修 改 点 的 现 有 GPolyline 链。如果启用, 则用户可以选择并拖动现 有 顶 点 。 除 非 在 GPolyEditingOptions 中 通 过 maxVertices 指 定 了小于当前顶点数的顶点 限制,否则还将在折线部分 的 中 点 处 添 加 “ 假 性 控 制”点,从而可让用户通过 点击和拖动这些附加顶点 加入新顶点。每当添加或移 动 顶 点 时 , 都 会 触 发 “lineupdated” 事 件 。 (自 2.111 开始) getVertexCount() Number 返回折线中顶点的数目。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. (自 2.46 开始) getVertex(index:Number) GLatLng 返回折线中指定索引对应 的顶点。(自 2.46 开始) getBounds() GLatLngBounds 返回此折线的边界。 4.2 GLatLngBounds 类 GLatLngBounds 实例在地理坐标中代表矩形,包括与 180 度子午线相交的矩形。 构造函数 构造函数 说明 GLatLngBounds(sw?:GLatLng, ne?:GLatLng) 根据西南角和东北角两个点构建矩形。 方法 方法 返回值 说明 containsLatLng (latlng:GLatLng) Boolean 当且仅当该点的地理坐标位于此矩形内时,返回 true。(自 2.88 开始) getCenter() GLatLng 返回矩形的中心点。(自 2.52 开始) 4.3 矩形选择 在地图上绘制一个矩形,在结束绘制时(mouseup 事件)将包含在矩形内的所有坐标点显 示出来,然后将地图平移到矩形的中心位置。使用 GLatLngBounds 类的 containsLatLng 方法 判断坐标点是否在矩形内。 参考代码如下: var polyBounds = zoomAreaPoly.getBounds(); var centerPoint = polyBounds.getCenter(); //返回矩形的中心点 if (markers != null && markers.length > 0) { var newMarkers = []; for (var i in markers) { if (polyBounds.containsLatLng(markers[i].getPoint()) == true) { Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. newMarkers.push(markers[i]); } } if (newMarkers.length > 0) { map.clearOverlays(); map.panTo(centerPoint); markers = null; markers = newMarkers; for (var i in newMarkers) { map.addOverlay(markers[i]); } } } 程序运行效果如下: 本章参考代码: lat-long-tool_v7.rar Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 4.4 可调的多边形 这里介绍使用 Gpolyline 类向地图添加多边形,使用 Gpolyline 绘制多边形的原理是向地 图添加 N 个坐标点,N >=3,把起点与终点设置为同一个点,然后将这些点连接起来,这样就 可以绘制出一个多边形。如果想让多边形变成可调整状态,需要添加一个方法 enableEditing。 这里介绍从 XML 文件中读取坐标点来绘制多边形。 XML 文件格式如下: 从 XML 文件读取数据(坐标点),并将数据转换为 GlatLng 格式,参考代码如下: ……. ……… ……… var polygon; function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(40.000, 116.568), 10); var markers = []; var points = []; GDownloadUrl("XML/drawDirection.xml", function(data, responseCode) { var xml = GXml.parse(data); markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 程序运行效果如下: var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); points.push(point); } getDirs(points); }); } function getDirs(points) { if (points) { polygon = new GPolyline(points); polygon.enableEditing(); //允许修改点的现有 GPolyline 链 map.addOverlay(polygon); } } } Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 本节完整参考代码: DrawPolyline-BlueLine.rar 4.4.1 样式设置 可以根据需要来修改多边形的样式。 参考代码如下: polygon = new GPolyline(points, "red", 10, 1, {geodesic :true}); 程序运行效果如下: 本节完整参考代码: DrawPolyline-RedLine.rar 4.4.2 顶点数据获取 这里介绍如何将顶点数据写入.txt文件,添加两个函数,getPoints(),writeFile()。 1) getPoints()将所有顶点坐标存入数组; 2) writeFile()将数组中的坐标写入文件。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 参考代码如下: function getPoints() { var vertexC = polygon.getVertexCount(); var vertexs = []; for (var i = 0; i < vertexC; i++) { vertexs.push(polygon.getVertex(i)); } /**/ writeFile("vertex.txt", vertexs); } //写文件 function writeFile(filename, filecontent) { var fso, f, s; fso = new ActiveXObject("Scripting.FileSystemObject"); f = fso.OpenTextFile(filename, 8, true); for (var i = 0; i < filecontent.length; i++) { var a = i + 1; f.Writeline(a + " " + filecontent[i]); } f.Close(); } Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 4.5 不可调的多边形 不可调的多边形创建方法与可调多边形是一样的,只是却掉 polygon.enableEditing() 属 性即可,详细代码请见 4.2 实例。这里不做详细介绍。 程序运行效果如下: 本节完整参考代码: PolylineEnableEditing.rar 5 自定义 GMarker GIcon 对象也有若干其他属性,应对其进行适当设置,以便使您的图标获取最佳的浏览器 兼容性和功能。例如,imageMap 属性指定图标图像不透明部分的形状。如果不在图标中设置 此属性,则整个图标图像(包括透明部分)在 Firefox/Mozilla 中都将是可点击的。有关详细 信息,请参阅 GIcon 类参考。 在许多情况下,图标可以有不同的前景,但具有相同的形状和阴影。最简单的实现方式是使用 GIcon 类的构造函数“复制”已有的图标(比如 G_DEFAULT_ICON,将其作为 GIcon 的 copy 参数),它将复制该图标所有的默认属性,然后您可以对其进行自定义。 参考代码如下: Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. var map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(39.9493, 116.3975), 13); // Create a base icon for all of our markers that specifies the // shadow, icon dimensions, etc. var baseIcon = new GIcon(G_DEFAULT_ICON); baseIcon.shadow = "http://www.google.cn/mapfiles/shadow50.png"; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); baseIcon.infoWindowAnchor = new GPoint(9, 2); // Creates a marker whose info window displays the letter corresponding // to the given index. function createMarker(point, index) { // Create a lettered icon for this point using our icon class var letter = String.fromCharCode("A".charCodeAt(0) + index); var letteredIcon = new GIcon(baseIcon); letteredIcon.image = "http://www.google.cn/mapfiles/marker" + letter + ".png"; // Set up our GMarkerOptions object markerOptions = { icon:letteredIcon }; var marker = new GMarker(point, markerOptions); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("标记 " + letter + ""); }); return marker; } // Add 10 markers to the map at random locations 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 < 10; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. southWest.lng() + lngSpan * Math.random()); map.addOverlay(createMarker(point, i)); } 本节完整参考代码: icon-custom.rar 5.1 GMarker 添加文字 想为 GMarker 添加文字,就需要定义一个新的类,这个类继承 GMarker,然后在这个新 类中添加一个 DIV,DIV.innerHTML 的值就是用来显示 GMarker 上面的文字。 首先定义一个 LabeledMarker 类。 主要参考代码如下: LabeledMarker.prototype.initialize = function(map) { var div = document.createElement("div"); div.className = this.labelClass; div.innerHTML = this.labelText; //重点 div.style.position = "absolute"; map.getPane(G_MAP_MARKER_PANE).appendChild(div); if (this.clickable) { var eventPassthrus = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout']; for (var i = 0; i < eventPassthrus.length; i++) { var name = eventPassthrus[i]; GEvent.addDomListener(div, name, newEventPassthru(this, name)); } // Mouseover behaviour for the cursor. div.style.cursor = "pointer"; } this.map = map; this.div = div; }; Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 然后在实例化 LabeledMarker 类时添加文字信息的参数。 point2, { labelText: label_text, labelClass: 'labeled_marker ' } point2 是坐标参数,label_text 是要显示的文字,labeled_marker 为 CSS 样式表。 参考代码如下: var label_text = "
" + ii + "
'; var mker = new LabeledMarker(point2, { labelText: label_text, labelClass: 'labeled_marker ' }); 程序运行效果如下: 本节完整参考代码:见 5.2 5.2 添加滑动门效果 这里要实现的滑动门效果就是当鼠标移动到标记上,图标会向右展开来显示里面的内容, 当鼠标离开标记时,标记会向左缩进,回复原来的样子。要实现这一技术,首先需要用到 DIV+CSS ,然后为标记添加 mouseover,mouseout 事件来控制图片的伸展。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 参考代码如下: var label_text = "
" + ii + "
'; 这里指定了< span >的 display:none 属性,默认让它隐藏。 然后为标记添加事件,参考代码如下: for (var j = 0; j < gmarkers.length; j++) { var mark = gmarkers[j]; GEvent.addListener(gmarkers[j], 'mouseover', Mover_(mark, j)); GEvent.addListener(gmarkers[j], 'mouseout', Mout_(mark, j)); } function Mover_(marker,j) { return function() { if (isShowMe == true) { var name = "michael_" + j; document.getElementById(name).style.display = ""; } } } function Mout_(marker,j) { return function() { if (isShowMe == true) { var name = "michael_" + j; document.getElementById(name).style.display = "none"; } } } 这段代码指定了当鼠标移动到标记上时,就去掉< span >的 display:none 属性, 当鼠标离开标记时,再将< span >的 display:none 属性重新设置。这就达到了滑动门效果。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 程序运行效果如下: 本节完整参考代码: SetMarker.rar 5.3 自定义图片无效果 在本章的开头“自定义 GMarker”已经介绍过了,这里就不再重复。 6 地图控件与地图属性 控件概述 http://ditu.google.cn 上的地图包含允许用户与地图交互的 UI 元素,这些元素称为“控 件”。您可以在 Google 地图 API 应用程序中添加这些控件的多种组合。您还可以通过子类 化 GControl 类来构建自己的自定义控件。 地图 API 带有大量可以在地图中使用的内置控件:  GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显 示在地图的左上角。 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.  GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情 况下显示在地图的左上角。  GSmallZoomControl - 小型缩放控件(无平移控件),用于在 Google 地图上显示行 车路线的小地图弹出窗口。  GScaleControl - 地图比例尺  GMapTypeControl - 让用户切换地图类型(例如“地图”和“卫星”)的按钮  GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按 钮和菜单项。  GOverviewMapControl - 位于屏幕一角的可折叠概览地图。 所有这些控件都基于 GControl 对象。 GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况,因为它们还可以进行配 置。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。有关 配置这些控件的详细信息,请参见修改标准控件的结构。 下面是当前支持的地图类型列表:  G_NORMAL_MAP 显示 Google 地图默认的普通二维图块  G_SATELLITE_MAP 显示拍摄的图块  G_HYBRID_MAP 同时显示拍摄的图块和普通(突出显示道路、城市名等明显地图特征) 图块  G_PHYSICAL_MAP 根据地形信息显示实际地图图块 如果您有图像或者已经定义好的叠加层,也可以定义自己的自定义地图类型。 默认情况下,Google 地图 API 提供三种地图类型:G_NORMAL_MAP、G_SATELLITE_MAP 和 G_HYBRID_MAP。您可以通过这两种方式来改变地图上可用的地图类型:使用 GMap2.removeMapType() 删除地图类型;使用 GMap2.addMapType() 添加地图类型。无 论您何时创建地图类型控件,它都使用当前地图上已经添加的地图类型,并通过控件让用户可以 切换这些地图类型。请注意,您必须在添加地图类 型控件(主要指 GHierarchicalMapTypeControl)之前指定各地图类型之间的阶层关系,以便地图类型控件可 以准确反映这些关系。 使用下面的代码可将 G_HYBRID_MAP 从添加到地图上的可用地图类型中删除,只剩下两种地 图类型。添加 GMapTypeControl 后,便只有这两种地图类型可用。 var map = new GMap2(document.getElementById("map_canvas"), { size: new GSize(640,320) } ); map.removeMapType(G_HYBRID_MAP); map.setCenter(new GLatLng(39.927, 116.407), 11); var mapControl = new GMapTypeControl(); map.addControl(mapControl); map.addControl(new GLargeMapControl()); 本节完整参考代码: control-maptypes.rar Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only. 7 空间数据类型 SQL Server 2008 支持用于存储空间数据的 geometry 和 geography 数据类型。这些 类型支持用来创建、比较、分析和检索空间数据的方法和属性。 geometry 数据类型支持平面或欧几里得(平面球)数据。geometry 数据类型符合适用 于 SQL 规范的开放地理空间联盟 (OGC) 简单特征 1.1.0 版。 geography 数据类型,该数据类型可存储诸如 GPS 纬度和经度坐标之类的椭圆体(圆球) 数据。 geometry 和 geography 数据类型支持十一种空间数据对象或实例类型。 可实例化类 型以蓝色表示。 请参考: 空间数据类型说明( V0.9).pptx 8 参考资料 谷歌 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 Generated by Foxit PDF Creator © Foxit Software http://www.foxitsoftware.com For evaluation only.
还剩35页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 5 人已下载

下载pdf

pdf贡献者

xulaowu

贡献于2012-03-12

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf