用Google Map 开发的小例子

google map添加控件并设置控件的位置 2010-01-14 14:31 google地图包含允许用户与地图交互的 UI 元素，这些元素称为“控件”。您可以在 Google 地图中组合使用这些控件来设置地图的样式。 地图 API 带有大量可以在地图中使用的内置控件： GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。 GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。 GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。 GScaleControl - 地图比例尺 GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮 GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项（可以在卫星地图的模式下显示地名和街道名）。 GOverviewMapControl - 位于屏幕一角的可折叠概览地图（在屏幕右下的鸟瞰图）。 所有这些控件都基于 GControl 对象。 1 //添加缩放控件 2 map.addControl(new google.maps.LargeMapControl()); 3 //添加地图比例尺 4 map.addControl(new google.maps.ScaleControl()); 5 //位于屏幕右下的鸟瞰地图 6 map.addControl(new google.maps.OverviewMapControl()); 7 //放置多个地图类型选择器的一组精选的嵌套按钮和菜单项 8 map.addControl(new google.maps.HierarchicalMapTypeControl()); 设置地图类型 下面是当前支持的地图类型列表： 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() 添加地图类型。无论您何时创建地图类型控件，它都使用当前地图上已经添加的地图类型，并通过控件让用户可以切换这些地图类型。 1 //切换地图类型 2 map.setMapType(G_NORMAL_MAP); 3 //移除 4 map.removeMapType(G_NORMAL_MAP); 5 //添加 6 map.addMapType(G_NORMAL_MAP); 在地图上放置控件 addControl 方法有第二个可选的参数 GControlPosition，可用于指定控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角： G_ANCHOR_TOP_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT 如果不包含此参数，则地图 API 会使用控件指定的默认位置。 GControlPosition 还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。 将 GMapTypeControl 添加到地图的右上角，填充为 10 个像素。 1 var map = new GMap2(document.getElementById"map_canvas")); 2 var mapTypeControl = new GMapTypeControl(); 3 var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)); 4 map.addControl(mapTypeControl, topRight);