Google 地图控件集

a.menu_google_maps_controls{font-weight:





bold;}Google 地图控件集一个Google 地图 - 默认控件集设置：Google 地图 - 默认控件集设置：当使用一个标准的google地图，它的默认设置如下： .Zoom-显示一个滑动条来控制map的Zoom级别.PPan-地图上显示的是一个平底碗样的控件，点击4个角平移地图.MapType-允许用户在map types(roadmap 和 satallite)之间切换.StreetView-显示为一个街景小人图标，可拖拽到地图上某个点来打开街景Google 地图 - 更多控件集除了以上默认控件集,Google还有： .Scale-显示地图比例尺.Rotate-显示一个小的圆周图标，可以转动地图.verview Map-从一个广域的视角俯视地图创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。 Google 地图 - 关闭默认控件集你可能希望能够关闭默认的控件集。 为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:





实例disableDefaultUI:





true尝试一下 ?Google 地图 - 开所有控件集一些控件集默认显示在地图上，而其它的不会，除非你设置它们。设置控件为true使其可见-设置控件为false则隐藏它。以下实例开启所有的控件：实例panControl:





true,zoomControl:





true,mapTypeControl:





true,scaleControl:





true,streetViewControl:





true,overviewMapControl:





true,rotateControl:





true尝试一下 ?Google 地图 - 修改控件集某些地图控件是可配置的。通过制定控件选项域改变控件集。F举个例子来说，修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项：.google.maps.ZoomControlStyle.SMALL-显示最小化zoom 控件.google.maps.ZoomControlStyle.LARGE-显示标准zoom滑动控件.google.maps.ZoomControlStyle.DEFAULT-基于设备和地图大小，选择最合适的控件实例zoomControl:





true,zoomControlOptions:





{? style:





google.maps.ZoomControlStyle.SMALL}尝试一下 ?注意： 如果需要修改一个控件，首先开启控件(设置其为true)。另一个控件为 MapType 控件。MapType 控件可显示为以下 style 选项之一：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。google.maps.MapTypeControlStyle.DEFAULT，用于显示"默认"的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。实例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}尝试一下 ?Google 地图 - 自定义控件集创建一个返回伦敦自定义控件，用于点击事件：(如果地图被拖拽):





实例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);尝试一下 ?Google 地图 - 控件集参考手册Google Maps API 参考手册.