Controles del API de Google Maps para Flash

Visión general de los controles del mapa

Los mapas de http://maps.google.com contienen elementos de interfaz de usuario que permiten que el usuario interactúe con el mapa. Puedes incluir varias combinaciones de estos elementos, denominados controles, en tu aplicación creada con el API de Google Maps para Flash.

El API de Google Maps para Flash incorpora varios controles integrados que puedes emplear en tus mapas:

• PositionControl: un control de vista panorámica tal como se emplea en Google Maps. Se muestra en la esquina superior izquierda del mapa de forma predeterminada.
• ZoomControl: una barra deslizante para el control de zoom tal como se emplea en Google Maps.
• MapTypeControl: botones que permiten al usuario alternar entre tipos de mapas (como Mapa y Satélite).
• ScaleControl: un control de escala es un indicador visual que se utiliza para indicar la resolución del mapa actual y el nivel de zoom.
• OverviewMapControl: un mapa de vista general en la esquina de la pantalla que se puede contraer.

Todos estos controles implementan la interfaz IControl. También puedes crear tus propios controles personalizados si estableces como subclase la clase ControlBase (que proporciona implementaciones no proporcionadas en la interfaz).

Adición de controles al mapa

Para añadir controles al mapa se utiliza el método Map addControl(). Por ejemplo, para añadir el control de vista panorámica que ves en Google Maps a tu propio mapa, tendrías que incluir la siguiente línea al inicializar el mapa:

map.addControl(new PositionControl());

Puedes añadir varios controles a un mapa. En este caso, añadimos los controles incorporados ZoomControl, PositionControl y MapTypeControl, que nos permiten mostrar una vista panorámica y aplicar el zoom al mapa, y cambiar entre los distintos tipos de mapa. Los controles estándar son totalmente operativos cuando se incluyen en un mapa.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(42.366662,-71.106262), 11, MapType.NORMAL_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

Ver ejemplo (ControlSimple.html)

Ver origen (ControlSimple.mxml)

Configuración de controles estándar

Algunos controles (por ejemplo, MapTypeControl) se pueden configurar. Por ejemplo, de forma predeterminada, el API de Google Maps proporciona cuatro tipos de mapas: NORMAL_MAP_TYPE, SATELLITE_MAP_TYPE, HYBRID_MAP_TYPE y PHYSICAL_MAP_TYPE. Puedes modificar los tipos de mapas disponibles para un mapa eliminando los tipos existentes mediante Map.removeMapType() o añadiéndolos mediante Map.addMapType(). Siempre que crees un control de tipo de mapa, éste utilizará los tipos de mapas adjuntos en ese momento y hará que estén disponibles.

El código que aparece a continuación elimina HYBRID_MAP_TYPE de los tipos de mapa disponibles adjuntos a un mapa, dejando sólo tres tipos de mapa. Una vez añadido el control MapTypeControl, sólo estarán disponibles estos tres tipos de mapas.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(42.366662,-71.106262), 11, MapType.NORMAL_MAP_TYPE);
  map.removeMapType(MapType.HYBRID_MAP_TYPE);
  map.addControl(new MapTypeControl());
}

Ver ejemplo (ControlMapTypes.html)

Ver origen (ControlMapTypes.mxml)

Colocación de controles en el mapa

El método setControlPosition() requiere un parámetro ControlPosition que permite especificar la posición del control en el mapa. Este valor puede ser uno de los valores indicados a continuación. Cada uno de ellos especifica una de las esquinas del mapa en la que se puede colocar el control.

• ANCHOR_TOP_RIGHT
• ANCHOR_TOP_LEFT
• ANCHOR_BOTTOM_RIGHT
• ANCHOR_BOTTOM_LEFT

Si se excluye este argumento, el API de Google Maps para Flash utiliza la posición predeterminada especificada por el control.

Opcionalmente, ControlPosition puede especificar un desplazamiento que indique la cantidad de píxeles de distancia al borde del mapa del control. Estos desplazamientos se especifican con valores x,y opcionales, donde x especifica un desplazamiento horizontal y y especifica un desplazamiento vertical.

Este ejemplo añade MapTypeControl a la esquina superior derecha del mapa con 16 píxeles de desplazamiento horizontal y 10 píxeles de desplazamiento vertical.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
 
  var bottomRight:ControlPosition = new ControlPosition(ControlPosition.ANCHOR_BOTTOM_RIGHT, 16, 10);
  var myMapTypeControl:MapTypeControl = new MapTypeControl();
  myMapTypeControl.setControlPosition(bottomRight);  
  map.addControl(myMapTypeControl);
}

Ver ejemplo (ControlPositioning.html)

Ver origen (ControlPositioning.mxml)

Consulta la referencia sobre la clase ControlPosition para obtener más información.

Controles de mapas personalizados

El API de Google Maps también permite crear controles de mapas personalizados estableciendo la clase ControlBase como subclase.

Para crear un control personalizado que se pueda utilizar, tendrás que anular el método initControlWithMap() de ControlBase. Tendrás que llamar al método de superclase desde dentro de este método anulado. También deberás especificar una posición de control (ControlPosition) en el constructor de control.

En este ejemplo, creamos un control de acercamiento sencillo con enlaces textuales en lugar de los iconos gráficos empleados en el control de acercamiento estándar de Google Maps.

public class ControlTextualZoom extends ControlBase {
	 
  public function ControlTextualZoom() {
    // Control will be placed at the top left corner of the map,
    // 7 pixels from the edges.
    super(new ControlPosition(ControlPosition.ANCHOR_TOP_LEFT, 7, 7));
  }
  
  public override function initControlWithMap(map:IMap):void {
	// first call the base class
	super.initControlWithMap(map);
    createButton("Zoom in", 0, 0, function(event:Event):void { map.zoomIn(); });
    createButton("Zoom out", 0, 20, function(event:Event):void { map.zoomOut(); });
  }
	
  private function createButton(text:String,x:Number,y:Number,callback:Function):void {
    var button:Sprite = new Sprite();
    button.x = x;
    button.y = y;
		
    var label:TextField = new TextField();
    label.text = text;
    label.x = 2;
    label.selectable = false;
    label.autoSize = TextFieldAutoSize.CENTER;
    var format:TextFormat = new TextFormat("Verdana");
    label.setTextFormat(format);
      
	var buttonWidth:Number = 100;
    var background:Shape = new Shape();
    background.graphics.beginFill(0xFFFFFF);
    background.graphics.lineStyle(1, 0x000000);
    background.graphics.drawRoundRect(0, 0, buttonWidth, 18, 4);
    background.graphics.endFill();

    button.addChild(background);
    button.addChild(label);
    button.addEventListener(MouseEvent.CLICK, callback);
		
    addChild(button);
  }
}

Ver ejemplo (ControlCustom.html)

Ver origen (TextualZoomControl.as)