Google地图接口API之地图控件集(五)
1.默认控件集
当使用一个标准的google地图，它的控件默认设置如下：
(1). Zoom-显示一个滑动条来控制map的Zoom级别，如下所示:
(2). PPan-地图上显示的是一个平底碗样的控件，点击4个角平移地图,如下所示：
(3). MapType-允许用户在map types(roadmap 和 satallite)之间切换，如下所示：
(4). StreetView-显示为一个街景小人图标，可拖拽到地图上某个点来打开街景，如下所示：
2. 拓展控件集
除了以上默认控件集,Google还有：
- Scale-显示地图比例尺
- .Rotate-显示一个小的圆周图标，可以转动地图
- .verview Map-从一个广域的视角俯视地图
创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。
3. 关闭默认控件集
如果你希望能够关闭默认的控件集，那么设置地图的disableDefaultUI的属性为true即可：
disableDefaultUI:true
例子如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var mapProp = { center: new google.maps.LatLng(51.508742,-0.120850), zoom:7, disableDefaultUI:true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
4. 开启所有控件集
一些控件集默认显示在地图上，而其它的不会，除非你设置它们，设置控件为true使其可见-设置控件为false则隐藏它。以下实例开启所有的控件：
panControl:true, zoomControl:true, mapTypeControl:true, scaleControl:true, streetViewControl:true, overviewMapControl:true, rotateControl:true
例子如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var mapProp = { center: new google.maps.LatLng(51.508742,-0.120850), zoom:7, panControl:true, zoomControl:true, mapTypeControl:true, scaleControl:true, streetViewControl:true, overviewMapControl:true, rotateControl:true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
5. 修改控件集
某些地图控件是可配置的。通过制定控件选项域改变控件集。
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 }
例子如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var mapProp = { center: new google.maps.LatLng(51.508742,-0.120850), zoom:7, zoomControl:true, zoomControlOptions: { style:google.maps.ZoomControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
注意： 如果需要修改一个控件，首先开启控件(设置其为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 }
例子如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var mapProp = { center: new google.maps.LatLng(51.508742,-0.120850), zoom:7, mapTypeControl:true, mapTypeControlOptions: { style:google.maps.MapTypeControlStyle.DROPDOWN_MENU }, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
同样你可以使用ControlPosition属性指定控件的位置:
mapTypeControl:true, mapTypeControlOptions: { style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, position:google.maps.ControlPosition.TOP_CENTER }
例子如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var mapProp = { center: new google.maps.LatLng(51.508742,-0.120850), zoom:7, mapTypeControl:true, mapTypeControlOptions: { style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, position:google.maps.ControlPosition.TOP_CENTER }, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
6. 自定义控件集
创建一个返回伦敦自定义控件，用于点击事件： (如果地图被拖拽):
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);
例子如下:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> var map; var london = new google.maps.LatLng(51.508742,-0.120850); // Add a Home control that returns the user to London function HomeControl(controlDiv, map) { 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); // Setup click-event listener: simply set the map to London google.maps.event.addDomListener(controlUI, 'click', function() { map.setCenter(london) }); } function initialize() { var mapDiv = document.getElementById('googleMap'); var myOptions = { zoom: 12, center: london, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(mapDiv, myOptions); // Create a DIV to hold the control and call HomeControl() var homeControlDiv = document.createElement('div'); var homeControl = new HomeControl(homeControlDiv, map); // homeControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
附上控件集API
控件集
| 构造函数/对象 | 描述 |
|---|---|
| MapTypeControlOptions | Holds options for modifying a control (position and style) |
| MapTypeControlStyle | Specifies what kind of map control to display (Drop-down menu or buttons) |
| OverviewMapControlOptions | Options for rendering of the overview map control (opened or collapsed) |
| PanControlOptions | Options for rendering of the pan control (position) |
| RotateControlOptions | Options for rendering of the rotate control (position) |
| ScaleControlOptions | Options for rendering of the scale control (position and style) |
| ScaleControlStyle | Specifies what kind of scale control to display |
| StreetViewControlOptions | Options for rendering of the street view pegman control (position) |
| ZoomControlOptions | Options for rendering of the zoom control (position and style) |
| ZoomControlStyle | Specifies what kind of zoom control to display (large or small) |
| ControlPosition | Specifies the placement of controls on the map |