天天看点

Google 地图控件集

一个Google 地图 - 默认控件集设置:

当使用一个标准的google地图,它的默认设置如下:

.Zoom-显示一个滑动条来控制map的Zoom级别

.PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图

.MapType-允许用户在map types(roadmap 和 satallite)之间切换

.StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景

除了以上默认控件集,Google还有:

.Scale-显示地图比例尺

.Rotate-显示一个小的圆周图标,可以转动地图

.verview Map-从一个广域的视角俯视地图

创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。

你可能希望能够关闭默认的控件集。

为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:

disableDefaultUI:true

一些控件集默认显示在地图上,而其它的不会,除非你设置它们。

设置控件为true使其可见-设置控件为false则隐藏它。

以下实例开启所有的控件:

panControl:true,

zoomControl:true,

mapTypeControl:true,

scaleControl:true,

streetViewControl:true,

overviewMapControl:true,

rotateControl:true

某些地图控件是可配置的。通过制定控件选项域改变控件集。

F举个例子来说,修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项:

.google.maps.ZoomControlStyle.SMALL-显示最小化zoom 控件

.google.maps.ZoomControlStyle.LARGE-显示标准zoom滑动控件

.google.maps.ZoomControlStyle.DEFAULT-基于设备和地图大小,选择最合适的控件

zoomControlOptions:

{

  style:google.maps.ZoomControlStyle.SMALL

}

<b>注意:</b> 如果需要修改一个控件,首先开启控件(设置其为true)。

另一个控件为 MapType 控件。

MapType 控件可显示为以下 style 选项之一:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR,用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。

google.maps.MapTypeControlStyle.DROPDOWN_MENU,用于显示单个按钮控件,以便您从下拉菜单中选择地图类型。

google.maps.MapTypeControlStyle.DEFAULT,用于显示"默认"的行为,该行为取决于屏幕尺寸,并且可能会在 API 以后的版本中有所变化。

mapTypeControlOptions: {

  style:google.maps.MapTypeControlStyle.DROPDOWN_MENU

同样你可以使用ControlPosition属性指定控件的位置:

  style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,

  position:google.maps.ControlPosition.TOP_CENTER

创建一个返回伦敦自定义控件,用于点击事件:

(如果地图被拖拽):

controlDiv.style.padding = '5px';

var controlUI = document.createElement('div');

controlUI.style.backgroundColor = 'yellow';

controlUI.style.border='1px solid';

controlUI.style.cursor = 'pointer';

controlUI.style.textAlign = 'center';

controlUI.title = 'Set map to London';

controlDiv.appendChild(controlUI);

var controlText = document.createElement('div');

controlText.style.fontFamily='Arial,sans-serif';

controlText.style.fontSize='12px';

controlText.style.paddingLeft = '4px';

controlText.style.paddingRight = '4px';

controlText.innerHTML = '&lt;b&gt;Home&lt;b&gt;'

controlUI.appendChild(controlText);

Google Maps API 参考手册.