一个Google 地图 - 默认控件集设置:
当使用一个标准的google地图,它的默认设置如下:
除了以上默认控件集,Google还有:
创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。
你可能希望能够关闭默认的控件集。
为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:
一些控件集默认显示在地图上,而其它的不会,除非你设置它们。
设置控件为true使其可见-设置控件为false则隐藏它。
以下实例开启所有的控件:
panControl: true , zoomControl: true , mapTypeControl: true , scaleControl: true , streetViewControl: true , overviewMapControl: true , rotateControl: true |
某些地图控件是可配置的。通过制定控件选项域改变控件集。
F举个例子来说,修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项:
注意: 如果需要修改一个控件,首先开启控件(设置其为true)。
另一个控件为 MapType 控件。
MapType 控件可显示为以下 style 选项之一:
mapTypeControl: true , mapTypeControlOptions: { style:google.maps.MapTypeControlStyle.DROPDOWN_MENU } |
同样你可以使用ControlPosition属性指定控件的位置:
mapTypeControl: true , mapTypeControlOptions: { 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 = '<b>Home<b>' controlUI.appendChild(controlText); |