谷歌地图控件

谷歌地图 - 默认控件

当显示标准的谷歌地图时，它提供了默认的控件集：

• 缩放（Zoom） - 显示滑块或 "+/-" 按钮来控制地图的缩放级别
• 平移（Pan） - 显示用于平移地图的平移控件
• 地图类型（MapType） - 允许用户在地图类型（路线图和卫星图）之间切换
• 街景（Street View） - 显示街景小人图标（Pegman icon），可以将其拖动到地图以启用街景

谷歌地图 - 更多控件

除了默认控件外，谷歌地图还提供：

• 比例（Scale） - 显示地图比例元素
• 旋转（Rotate） - 显示小型的圆形图标，允许您旋转地图
• 概览地图（Overview Map） - 显示缩略图概览地图，反映更广泛区域内的当前地图视口

您可以规定在创建地图时显示哪些控件（在 MapOptions 内）或通过调用 setOptions() 来更改地图的选项。

谷歌地图 - 禁用默认控件

您可能希望关闭默认控件。

对此，请将地图的 disableDefaultUI 属性（在地图的选项对象内）设置为 true：

实例

var mapOptions {disableDefaultUI: true}

谷歌地图 - 打开所有控件

一些控件默认会出现在地图上；而其他的则不会出现，除非您设置它们。

请在地图选项对象中规定向地图添加或删除的控件。

将控件设置为 true 可使其可见 - 将控件设置为 false 可隐藏它。

这个例子打开了所有控件：

实例

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

谷歌地图 - 修改控件

一些地图控件是可配置的。

可以通过规定控件的选项字段来修改控件。

例如，在 zoomControlOptions 字段中规定了用于修改 Zoom 控件的选项。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
}