Google Maps API 基础2

GoogleMapsAPI基础(2)谢健文华南农业大学信息学院4.GoogleMapsAPI地图控件地图控件概述向地图添加控件在地图上放置控件定制地图控件地图控件概述地图上允许用户与地图交互的UI元素，称为控件。GooglemapsAPI带有大量可以在地图中使用的内置控件：•GLargeMapControl-在Google地图上使用的大型平移/缩放控件。默认情况下位于地图的左上角。•GSmallMapControl-在Google地图上使用的小型平移/缩放控件。默认情况下位于地图的左上角。•GSmallZoomControl-在Google地图上用于显示行车方向的小地图弹出窗口中使用的小型缩放控件（无平移控件）。•GScaleControl-地图比例尺•GMapTypeControl-使用户可以切换地图类型（如“地图”和“卫星”）的按钮。•GHierarchicalMapTypeControl-用于放置多个地图类型选择器的嵌套按钮选项和菜单项。•GOverviewMapControl-位于屏幕一角，可折叠的缩略图。所有这些控件都基于GControl对象varmap=newGMap2(document.getElementById(map_canvas),{size:newGSize(640,320)});map.removeMapType(G_HYBRID_MAP);map.setCenter(newGLatLng(42.366662,-71.106262),11);varmapControl=newGMapTypeControl();map.addControl(mapControl);map.addControl(newGLargeMapControl());地图控件示例向地图添加控件使用GMap2方法addControl()向地图添加控件。varmap=newGMap2(document.getElementById(map));map.addControl(newGSmallMapControl());map.setCenter(newGLatLng(39.917,116.397),14);向地图添加控件在地图上放置控件addControl方法有一个可选的第二参数GControlPosition，可用于指定该控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角：–G_ANCHOR_TOP_RIGHT–G_ANCHOR_TOP_LEFT–G_ANCHOR_BOTTOM_RIGHT–G_ANCHOR_BOTTOM_LEFT如果不包含此参数，则地图API将使用控件指定的默认位置。GControlPosition（可选）可以指定一个偏移值，表示放置的控件与地图边相距多少像素。该偏移值使用GSize对象指定。在地图上放置控件varmap=newGMap2(document.getElementByIdmap_canvas));map.setCenter(newGLatLng(39.917,116.397),14);varsmallMapControl=newGsmallMapControl();vartopRight=newGControlPosition(G_ANCHOR_TOP_RIGHT,newGSize(10,10));varbottomRight=newGControlPosition(G_ANCHOR_BOTTOM_RIGHT,newGSize(10,10));map.addControl(smallMapControl,topRight);GEvent.addListener(map,dblclick,function(){map.removeControl(smallMapControl);map.addControl(newGsmallMapControl(),bottomRight);});本示例会将GsmallMapControl添加到地图的右上角，边距为10像素。双击地图上的任何位置均会移除该控件，并将其放在地图的右下角。在地图上放置控件定制地图控件通过创建GControl的子类定制地图控件。（将prototype对象分配给GControl对象的实例:XContorl.prototype=newGContorl）至少为该类定义以下两个方法：initialize()和getDefaultPosition()。initialize()方法必须返回DOM元素，而getDefaultPosition()方法必须返回类型为GControlPosition的对象。所有地图控件均应添加到地图容器(Container)，后者可以通过GMap2的getContainer()方法访问。创建DOM元素作为子节点添加事件加入容器initializeP164getDefaultPosition5.GoogleMapsAPI地图叠加层地图叠加层概述标记可拖拽标记图标定制图标标记管理器折线绘制折线测地折线编码折线多边形底面叠加层图块叠加层图块层叠加层定制地图类型图块探测器地图叠加层概述叠加层(Overlay)是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。叠加层表现为“添加”到地图上以指明点、线或区域的对象。地图API有如下几种叠加层：•标记(Marker)：经常显示定制图标。标记是类型为GMarker的对象，可以使用GIcon类型。•折线(Polyline)：线是类型为GPolyline的对象。•多边形(Polygon)（如果是任意形状的区域）或底面叠加层(Groundoverlay)（如果是矩形区域）：多边形类似于由闭环点集合组成的折线，可以是任意形状。底面叠加层通常用于直接或间接映射为地图上的图块的区域。•图块叠加层(Tileoverlay)：通过使用GTileLayerOverlay来修改自己的一组图块，或者通过使用GMapType创建自己的地图类型。•信息窗口：信息窗口会自动添加到地图，并且仅有一个类型为GInfoWindow的对象与一个地图关联。每个叠加层都实现GOverlay接口。可以使用GMap2.addOverlay()方法向地图添加叠加层，使用GMap2.removeOverlay()方法删除叠加层。标记标记标识地图上的点。默认情况下，它们使用G_DEFAULT_ICON，也可以指定定制的图标。GMarker构造函数取GLatLng和GMarkerOptions（可选）对象作为参数。可拖拽标记可拖拽标记实现以下四种事件：click、dragstart,drag和dragend，来表示其拖拽状态。默认情况下，标记可单击但不可拖拽，所以它们需要通过将额外的标记选项draggable设置为true来初始化。图标标记用自定义的新图标来显示，以替代默认图标。因为地图API中单个图标由多个不同的图像组成，所以定义图标非常复杂。一个图标最少必须定义前景图像、类型为GSize的尺寸和用于放置图标的图标偏移值。最简单的图标是基于G_DEFAULT_ICON类型。基于此类型创建图标使您可以通过仅修改若干属性即可快速更改默认图标。在下面的示例中，我们使用G_DEFAULT_ICON类型创建一个图标，然后将其修改为使用其他图像。简单图标复杂图标定制图标GIcon对象有若干其他属性（如前景色，形状和阴影等）可进行设置，以便最大程度地为图标获得浏览器兼容性和功能。例如，imageMap属性指定图标图像不透明部分的形状。如果不在图标中设置此属性，则在Firefox/Mozilla中，整个图标图像（包括透明部分）都将是可单击的。请参阅GIcon类参考标记管理器添加大量标记可能会降低显示地图的速度，也会产生太多视觉混乱，尤其是在处于某些缩放级别时。标记管理器工具提供了一个解决这些问题的方案，允许在同一个地图上高效显示数百个标记，并能够指定应显示标记的缩放级别。标记管理器工具在GMaps工具库中提供。该库是开放源代码，包含不属于核心Google地图API的工具包。scriptsrc=标记管理器对象要使用标记管理器，请创建一个MarkerManager对象。varmap=newGMap2(document.getElementById(map_canvas));varmgr=newMarkerManager(map);varmap=newGMap2(document.getElementById(map_canvas));varmgrOptions={borderPadding:50,maxZoom:15,trackMarkers:true};varmgr=newMarkerManager(map,mgrOptions);标记管理器的性能选项：——maxZoom:指定此标记管理器监视的最大缩放级别。——borderPadding:指定管理器除当前视图外还监控的额外边界填充(padding)区域（单位为像素）。——trackMarkers:指定标记管理器是否应跟踪标记的移动。以下示例创建欧洲的模拟天气地图。在缩放级别3时，显示20个随机分布的天气图标。在级别6时，可以轻松地辨别出人口超过30万的所有200个城市，显示另外200个标记。最后，在级别8时，会显示1000个标记。批量添加标记折线GPolyline对象包括一系列点，并创建有序连接这些点的一系列线段。绘制折线GPolyline对象使用浏览器的矢量绘制功能（如果可用）。在InternetExplorer中，Google地图使用VML绘制折线；在其他浏览器中使用SVG（如果可用）。在所有其他环境中，我们从Google服务器请求一个线段图像并把该图像叠加到地图上，当地图缩放和拖拽时按需要刷新图像。以下代码片段会在两点之间创建10像素宽的红色折线：varpolyline=newGPolyline([newGLatLng(39.917,116.397),newGLatLng(39.927,116.407)],#ff0000,10);map.addOverlay(polyline);测地折线(GeodesicPolyline)在地图上表示的折线是符合当前投影的直线。即它们在地图上显示为直的，但实际上没有正确考虑到地球的弧度。如果要绘制测地线，需要在GPolyline的GPolylineOptions参数中传递geodesic:true。编码折线略……多边形GPolygon对象与对象GPolyline相似，它们都由一系列有序点组成。但是，多边形不象折线一样有两个端点，而是设计为形成闭环的区域。（始终应闭合多边形以避免发生未定义的行为。）GPolygon对象和GPolyline对象类似，使用浏览器的矢量绘制功能（如果可用）。底面叠加层使用GGroundOverlay对象实现放在地图上的图像，可以。GGroundOverlay的构造函数取图像的URL和图像的GLatLngBounds作为参数。以下的示例将秦赵长平之战的示意图作为叠加层放在今山西高平市附近：图块叠加层•Google地图API中的地图在每个缩放级别都包含一组图块(Tile)，涵盖地球的整个表面。0级别2级别修改这些图块的显示有两种方式：使用GTileLayerOverlay在现有的地图类型上实现自己的图块叠加层。使用GMapType实现自己的定制地图类型每一种情况都需要实现GTileOverlay接口中的三个抽象方法：1.getTileUrl()向地图返回包含地图图块图像的URL（提供传递的GPoint和缩放级别的情况下）2.isPng()向地图返回表示该图像是否是PNG文件（可以透明显示）Boolean。如果为true，则假定该图像为PNG。3.getOpacity()返回0.0和1.0之间的值，表示