GoogleMapsAPI基础.ppt

《GoogleMapsAPI基础.ppt》由会员分享，可在线阅读，更多相关《GoogleMapsAPI基础.ppt（51页珍藏版）》请在装配图网上搜索。

1、Google Maps API 基 础(2),谢健文 华南农业大学信息学院,4. Google Maps API 地图控件,地图控件概述 向地图添加控件 在地图上放置控件 定制地图控件,地图控件概述,地图上允许用户与地图交互的 UI 元素，称为控件。 Google maps API 带有大量可以在地图中使用的内置控件： GLargeMapControl - 在 Google 地图上使用的大型平移/缩放控件。默认情况下位于地图的左上角。 GSmallMapControl - 在 Google 地图上使用的小型平移/缩放控件。默认情况下位于地图的左上角。 GSmallZoomControl - 在

2、 Google 地图上用于显示行车方向的小地图弹出窗口中使用的小型缩放控件（无平移控件）。 GScaleControl - 地图比例尺 GMapTypeControl - 使用户可以切换地图类型（如“地图”和“卫星”）的按钮。 GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的嵌套按钮选项和菜单项。 GOverviewMapControl - 位于屏幕一角，可折叠的缩略图。 所有这些控件都基于 GControl 对象,var map = new GMap2(document.getElementById(map_canvas), size: new GSi

3、ze(640,320) ); map.removeMapType(G_HYBRID_MAP); map.setCenter(new GLatLng(42.366662,-71.106262), 11); var mapControl = new GMapTypeControl(); map.addControl(mapControl); map.addControl(new GLargeMapControl();,地图控件示例,向地图添加控件,使用 GMap2 方法 addControl() 向地图添加控件。,var map = new GMap2(document.getElementByI

4、d(map); map.addControl(new GSmallMapControl(); map.setCenter(new GLatLng(39.917, 116.397), 14);,向地图添加控件,在地图上放置控件,addControl 方法有一个可选的第二参数 GControlPosition，可用于指定该控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角： G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT 如果不包含此参数，则地图 API 将使用

5、控件指定的默认位置。 GControlPosition（可选）可以指定一个偏移值，表示放置的控件与地图边相距多少像素。该偏移值使用 GSize 对象指定。,在地图上放置控件,var map = new GMap2(document.getElementByIdmap_canvas); map.setCenter(new GLatLng(39.917,116.397 ), 14); var smallMapControl = new GsmallMapControl (); var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new G

6、Size(10,10); var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10); map.addControl(smallMapControl, topRight); GEvent.addListener(map, dblclick, function() map.removeControl(smallMapControl); map.addControl(new GsmallMapControl (), bottomRight); );,本示例会将 GsmallMapControl 添加到

7、地图的右上角，边距为 10 像素。双击地图上的任何位置均会移除该控件，并将其放在地图的右下角。,在地图上放置控件,定制地图控件,通过创建 GControl 的子类定制地图控件。（将 prototype对象分配给 GControl 对象的实例 : XContorl.prototype=new GContorl） 至少为该类定义以下两个方法：initialize() 和 getDefaultPosition()。initialize() 方法必须返回 DOM 元素，而 getDefaultPosition() 方法必须返回类型为 GControlPosition 的对象。 所有地图控件均应添加到地

8、图容器(Container)， 后者可以通过 GMap2 的 getContainer() 方法访问。,创建 DOM元素,作为子节点,添加事件,加入容器,initialize,P164,getDefaultPosition,5. Google Maps API 地图叠加层,地图叠加层概述 标记 可拖拽标记 图标 定制图标 标记管理器 折线 绘制折线 测地折线 编码折线 多边形 底面叠加层 图块叠加层 图块层叠加层 定制地图类型 图块探测器,地图叠加层概述,叠加层 (Overlay) 是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。叠加层表现为“添加”到地图上以指明点、线或区域的

9、对象。 地图 API 有如下几种叠加层： 标记 (Marker)：经常显示定制图标。标记是类型为 GMarker 的对象，可以使用 GIcon 类型。 折线 (Polyline) ：线是类型为 GPolyline 的对象。 多边形 (Polygon)（如果是任意形状的区域）或底面叠加层 (Ground overlay)（如果是矩形区域）：多边形类似于由闭环点集合组成的折线，可以是任意形状。底面叠加层通常用于直接或间接映射为地图上的图块的区域。 图块叠加层 (Tile overlay) ：通过使用 GTileLayerOverlay 来修改自己的一组图块，或者通过使用 GMapType 创建自己

10、的地图类型。 信息窗口：信息窗口会自动添加到地图，并且仅有一个类型为 GInfoWindow 的对象与一个地图关联。 每个叠加层都实现 GOverlay 接口。可以使用 GMap2.addOverlay() 方法向地图添加叠加层，使用 GMap2.removeOverlay() 方法删除叠加层。,标记,标记标识地图上的点。默认情况下，它们使用 G_DEFAULT_ICON，也可以指定定制的图标。GMarker 构造函数取 GLatLng 和 GMarkerOptions（可选）对象作为参数。,可拖拽标记,可拖拽标记实现以下四种事件：click、 dragstart, drag 和 dragen

11、d，来表示其拖拽状态。默认情况下，标记可单击但不可拖拽，所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。,图标,标记用自定义的新图标来显示，以替代默认图标。因为地图 API 中单个图标由多个不同的图像组成，所以定义图标非常复杂。一个图标最少必须定义前景图像、类型为 GSize 的尺寸和用于放置图标的图标偏移值。 最简单的图标是基于 G_DEFAULT_ICON类型。基于此类型创建图标使您可以通过仅修改若干属性即可快速更改默认图标。 在下面的示例中，我们使用 G_DEFAULT_ICON 类型创建一个图标，然后将其修改为使用其他图像。,简单图标,复杂图标,定制图

12、标,GIcon 对象有若干其他属性（如前景色，形状和阴影等）可进行设置，以便最大程度地为图标获得浏览器兼容性和功能。例如，imageMap 属性指定图标图像不透明部分的形状。如果不在图标中设置此属性，则在 Firefox/Mozilla 中，整个图标图像（包括透明部分）都将是可单击的。 请参阅 GIcon 类参考,标记管理器,添加大量标记可能会降低显示地图的速度，也会产生太多视觉混乱，尤其是在处于某些缩放级别时。标记管理器工具提供了一个解决这些问题的方案，允许在同一个地图上高效显示数百个标记，并能够指定应显示标记的缩放级别。 标记管理器工具在 GMaps 工具库中提供。该库是开放源代码，包含不

13、属于核心 Google 地图 API 的工具包。,标记管理器对象,要使用标记管理器，请创建一个 MarkerManager 对象。,var map = new GMap2(document.getElementById(map_canvas); var mgr = new MarkerManager(map);,var map = new GMap2(document.getElementById(map_canvas); var mgrOptions = borderPadding: 50, maxZoom: 15, trackMarkers: true ; var mgr = new Ma

14、rkerManager(map, mgrOptions);,标记管理器的性能选项： maxZoom: 指定此标记管理器监视的最大缩放级别。 borderPadding: 指定管理器除当前视图外还监控的额外边界填充 (padding) 区域（单位为像素）。 trackMarkers: 指定标记管理器是否应跟踪标记的移动。,以下示例创建欧洲的模拟天气地图。在缩放级别 3 时，显示 20 个随机分布的天气图标。在级别 6 时，可以轻松地辨别出人口超过 30 万的所有 200 个城市，显示另外 200 个标记。最后，在级别 8 时，会显示 1000 个标记。,批量添加标记,折线,GPolyline对象

15、包括一系列点，并创建有序连接这些点的一系列线段。,绘制折线 GPolyline 对象使用浏览器的矢量绘制功能（如果可用）。在 Internet Explorer 中，Google 地图 使用 VML绘制折线；在其他浏览器中使用 SVG（如果可用）。在所有其他环境中，我们从 Google 服务器请求一个线段图像并把该图像叠加到地图上，当地图缩放和拖拽时按需要刷新图像。,以下代码片段会在两点之间创建 10 像素宽的红色折线：,var polyline = new GPolyline( new GLatLng(39.917, 116.397), new GLatLng(39.927, 116.407

16、) , #ff0000, 10); map.addOverlay(polyline);,测地折线 (Geodesic Polyline),在地图上表示的折线是符合当前投影的直线。即它们在地图上显示为直的，但实际上没有正确考虑到地球的弧度。如果要绘制测地线，需要在 GPolyline 的 GPolylineOptions 参数中传递geodesic: true。,编码折线,略,多边形,GPolygon 对象与对象 GPolyline 相似，它们都由一系列有序点组成。但是，多边形不象折线一样有两个端点，而是设计为形成闭环的区域。 （始终应闭合多边形以避免发生未定义的行为。） GPolygon 对象

17、和 GPolyline 对象类似， 使用浏览器的矢量绘制功能（如果可用）。,底面叠加层,使用 GGroundOverlay 对象实现放在地图上的图像，可以。GGroundOverlay 的构造函数取图像的 URL 和图像的 GLatLngBounds 作为参数。 以下的示例将秦赵长平之战的示意图作为叠加层放在今山西高平市附近：,图块叠加层,Google 地图 API 中的地图在每个缩放级别都包含一组图块 (Tile)，涵盖地球的整个表面。,0级别 2级别,修改这些图块的显示有两种方式： 使用 GTileLayerOverlay 在现有的地图类型上实现自己的图块叠加层。 使用 GMapType

18、实现自己的定制地图类型,每一种情况都需要实现 GTileOverlay 接口中的三个抽象方法： getTileUrl() 向地图返回包含地图图块图像的 URL（提供传递的 GPoint 和缩放级别的情况下） isPng() 向地图返回表示该图像是否是 PNG 文件（可以透明显示）Boolean。如果为 true，则假定该图像为 PNG。 getOpacity() 返回 0.0 和 1.0 之间的值，表示显示此图像的透明度。,以下代码在所有缩放级别每个图块上显示一个简单的透明叠加层，使用浮动十字线表示图块的轮廓。,定义和检索地图数据,Google 地图坐标,Google 地图 API 使用三个坐

19、标系： 像素坐标，引用图像图块上的一个点 图块坐标，引用图块层中的一个图块 缩放层，定义总的图块数,像素坐标,Google 地图中的每个图块都包含 256 x 256 个像素。因此，可以使用 GPoint x,y 对引用特定图块上一个点。每个图块的原点 (0,0) 表示为该图块的西北角。,图块坐标,因此索引特定缩放级别上的特定点可以使用两个 GPoint 值：一个引用正在使用的图块，一个引用该图块的 256 x 256 图像中的像素坐标。,例如，在缩放级别 2，当地球分为 16 个图块时，每个图块可以通过一个唯一的 x,y 对来引用：,var map = new GMap2(document.

20、getElementById(map_canvas); map.setCenter(new GLatLng(39.917, 116.397), 10); map.addControl(new GSmallMapControl(); GEvent.addListener(map,click, function(overlay,latlng) if (overlay) / 忽略点击在信息窗口上的事件 return; var tileCoordinate = new GPoint(); var tilePoint = new GPoint(); var currentProjection = G_N

21、ORMAL_MAP.getProjection(); tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom(); tileCoordinate.x = Math.floor(tilePoint.x / 256); tileCoordinate.y = Math.floor(tilePoint.y / 256); var myHtml = 像素坐标: x: + tilePoint.x + y: + tilePoint.y + 图块坐标: x: + tileCoordinate.x + y: + tileCoordinate.y + 缩放层次: + map.getZoom(); map.openInfoWindow(latlng, myHtml);,图块探测器,自定义叠加层,参考书p267,