Controles de Google Maps

Google Maps - Controles por defecto

Cuando se muestra el mapa de Google estándar, proporciona un conjunto de controles por defecto:

• Zoom (Zoom) - Muestra un deslizador o botones "+/-" para controlar el nivel de zoom del mapa
• Desplazamiento (Pan) - Muestra el control de desplazamiento utilizado para desplazar el mapa
• Tipo de mapa (MapType) - Permite al usuario cambiar entre los tipos de mapa (mapa de ruta y mapa de satélite)
• Street View (Vista de calle) - Muestra el ícono de小人 (Pegman), que se puede arrastrar al mapa para activar la vista de calle

Google Maps - Más controles

Además de los controles por defecto, Google Maps ofrece:

• Escala (Scale) - Muestra el elemento de escala del mapa
• Girar (Rotate) - Muestra un pequeño ícono circular que permite girar el mapa
• Mapa de vista general (Overview Map) - Muestra un mapa de vista general en miniatura, que refleja la vista actual del visor del mapa en una área más amplia

Puede especificar qué controles mostrar al crear el mapa (dentro de MapOptions) o cambiar las opciones del mapa llamando a setOptions().

Google Maps - Desactivar controles por defecto

Es posible que desee desactivar los controles por defecto.

Para esto, configure la propiedad disableDefaultUI del mapa (dentro del objeto de opciones del mapa) en true:

实例

var mapOptions {disableDefaultUI: true}

Google Maps - Abrir todos los controles

Algunos controles se mostrarán por defecto en el mapa; otros no se mostrarán a menos que los configure.

Por favor, especifique en el objeto de opciones del mapa los controles que se agregarán o eliminarán del mapa.

Establecer el control en true lo hace visible - Establecer el control en false lo oculta.

Este ejemplo abre todos los controles:

实例

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
}