Google Maps - 控件
Google Maps - 默认控件
显示标准 Google 地图时,它会附带默认控件集
- Zoom - 显示一个滑块或“+/-”按钮来控制地图的缩放级别
- Pan - 显示一个平移控件用于平移地图
- MapType - 允许用户在地图类型(路线图和卫星图)之间切换
- Street View - 显示一个 Pegman 图标,可以将其拖到地图上以启用街景视图
Google Maps - 更多控件
除了默认控件外,Google Maps 还提供
- Scale - 显示地图比例尺元素
- Rotate - 显示一个小的圆形图标,允许你旋转地图
- Overview Map - 显示一个缩略图概览地图,反映当前地图视口在一个更广阔区域内的位置
你可以在创建地图时(在 MapOptions 中)指定显示哪些控件,或者通过调用 setOptions() 来更改地图的选项。
Google Maps - 禁用默认控件
你可能更希望关闭默认控件。
为此,将 Map 的 disableDefaultUI 属性(在 Map options 对象中)设置为 true
示例
var mapOptions {disableDefaultUI: true}
Google Maps - 打开所有控件
一些控件默认显示在地图上;而其他控件则不会出现,除非你进行设置。
添加或移除地图上的控件在 Map options 对象中指定。
将控件设置为 true 以使其可见 - 将控件设置为 false 以隐藏它。
以下示例将“打开”所有控件
示例
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - 修改控件
几个地图控件是可配置的。
可以通过指定控件选项字段来修改控件。
例如,修改 Zoom 控件的选项在 zoomControlOptions 字段中指定。zoomControlOptions 字段可能包含
- google.maps.ZoomControlStyle.SMALL - 显示一个迷你缩放控件(仅带 + 和 - 按钮)
- google.maps.ZoomControlStyle.LARGE - 显示标准的缩放滑块控件
- google.maps.ZoomControlStyle.DEFAULT - 根据设备和地图大小选择最佳的缩放控件
示例
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
注意: 如果你修改控件,请务必先启用该控件(将其设置为 true)。
另一个可配置的控件是 MapType 控件。
修改控件的选项在 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
}