Google 地图 控件
Google 地图 - 默认控件
当显示标准的 Google 地图时,它会带有默认的控件集
- 缩放 - 显示一个滑块或 "+/-" 按钮来控制地图的缩放级别
- 平移 - 显示一个平移控件来平移地图
- 地图类型 - 允许用户在地图类型之间切换(路线图和卫星图)
- 街景 - 显示一个 Pegman 图标,可以将其拖放到地图上以启用街景
Google 地图 - 更多控件
除了默认控件之外,Google 地图还具有
- 比例尺 - 显示地图比例尺元素
- 旋转 - 显示一个小的圆形图标,允许您旋转地图
- 概览地图 - 显示一个缩略图概览地图,反映当前地图视窗在一个更广阔的区域内
您可以在创建地图时(在 MapOptions 中)指定要显示哪些控件,或者通过调用 setOptions() 来更改地图的选项。
Google 地图 - 禁用默认控件
您可能希望关闭默认控件。
要做到这一点,请将地图的 disableDefaultUI 属性(在地图选项对象中)设置为 true
示例
var mapOptions {disableDefaultUI: true}
Google 地图 - 打开所有控件
某些控件默认情况下会出现在地图上;而其他控件则不会出现,除非您设置它们。
在地图上添加或删除控件是在地图选项对象中指定的。
将控件设置为 true 以使其可见 - 将控件设置为 false 以隐藏它。
以下示例将所有控件“打开”
示例
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google 地图 - 修改控件
几个地图控件是可配置的。
可以通过指定控件选项字段来修改控件。
例如,用于修改缩放控件的选项在 zoomControlOptions 字段中指定。zoomControlOptions 字段可能包含
- google.maps.ZoomControlStyle.SMALL - 显示迷你缩放控件(只有 + 和 - 按钮)
- google.maps.ZoomControlStyle.LARGE - 显示标准缩放滑块控件
- google.maps.ZoomControlStyle.DEFAULT - 根据设备和地图大小选择最佳缩放控件
示例
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
注意:如果修改控件,请始终先启用控件(将其设置为 true)。
另一个可配置的控件是地图类型控件。
用于修改控件的选项在 mapTypeControlOptions 字段中指定。mapTypeControlOptions 字段可能包含:
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - 为每种地图类型显示一个按钮
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - 通过下拉菜单选择地图类型
- google.maps.MapTypeControlStyle.DEFAULT - 显示“默认”行为(取决于屏幕大小)
示例
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
}