Controles da API do Google Maps para Flash

Visão geral dos controles de mapa

Os mapas em http://maps.google.com contêm elementos de interface do usuário que possibilitam sua interação em todo o mapa. Esses elementos são conhecidos como controles e você pode incluir várias combinações desses controles no aplicativo da API do Google Maps para Flash.

A API do Google Maps para Flash acompanha vários controles incorporados que você pode usar nos mapas:

• PositionControl - um controle de panorâmica como usado no Google Maps. Por padrão, aparece no canto superior esquerdo do mapa.
• ZoomControl - um controle deslizante de zoom como usado no Google Maps.
• MapTypeControl - botões que permitem ao usuário alternar entre tipos de mapa (por exemplo, Mapa e Satélite).
• ScaleControl - um controle de escala é um indicador visual usado para indicar a resolução do mapa e do nível de zoom atuais.
• OverviewMapControl - um mapa de visão geral que pode ser recolhido no canto da tela.

Todos esses controles implementam a interface IControl. Você também pode construir seus próprios controles personalizados ao subclassificar a classe ControlBase (que fornece implementações não fornecidas na interface).

Como adicionar controles ao mapa

É possível adicionar controles ao mapa usando o método addControl() de Map. Por exemplo, para adicionar o controle de panorâmica visto no Google Maps ao mapa, você incluiria esta linha na inicialização do mapa:

map.addControl(new PositionControl());

Você pode adicionar vários controles a um mapa. Nesse caso, adicionamos os controles integrados ZoomControl, PositionControl e MapTypeControl, que permitem obter uma visualização panorâmica ou aplicar zoom ao mapa e alternar entre os tipos diferentes de mapas. Uma vez incluídos em um mapa, os controles padrão são totalmente operacionais.

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 exemplo (ControlSimple.html)

Ver código-fonte (ControlSimple.mxml)

Como configurar controles padrão

Alguns controles (como o MapTypeControl) podem ser configurados. Por exemplo, por padrão, a API do Google Maps fornece quatro tipos de mapas: NORMAL_MAP_TYPE, SATELLITE_MAP_TYPE, HYBRID_MAP_TYPE e PHYSICAL_MAP_TYPE. Você pode alterar os tipos de mapas disponíveis a um mapa ao remover tipos existentes usando o Map.removeMapType() ou adicionando-os com o Map.addMapType(). Sempre que você cria um controle do tipo de mapa, ele usa os tipos de mapa anexados no momento e os disponibiliza por meio do controle.

O código abaixo remove HYBRID_MAP_TYPE dos tipos de mapas disponíveis anexados a um mapa, deixando apenas três tipos de mapa. Depois de adicionarmos MapTypeControl, apenas esses três tipos de mapa permanecem disponíveis.

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 exemplo (ControlMapTypes.html)

Ver código-fonte (ControlMapTypes.mxml)

Como posicionar controles no mapa

O método setControlPosition() usa um parâmetro ControlPosition que permite especificar a posição do controle no mapa. Esse valor pode ser um dos valores a seguir, cada um especificando um canto do mapa no qual o controle é inserido:

• ANCHOR_TOP_RIGHT
• ANCHOR_TOP_LEFT
• ANCHOR_BOTTOM_RIGHT
• ANCHOR_BOTTOM_LEFT

Caso o argumento seja excluído, a API do Google Maps para Flash usa a posição padrão especificada pelo controle.

ControlPosition pode especificar um deslocamento indicando a quantos pixels da borda do mapa o controle deve ser colocado. Esses deslocamentos são especificados usando valores x,y opcionais, onde x especifica um deslocamento horizontal e y um deslocamento vertical.

Este exemplo adiciona MapTypeControl ao canto superior direito do mapa com 16 pixels de preenchimento horizontal e 10 pixels de preenchimento 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 exemplo (ControlPositioning.html)

Ver código-fonte (ControlPositioning.mxml)

Consulte a referência de classe ControlPosition para saber mais.

Controles de mapa personalizados

A API do Google Maps também permite criar controles de mapa personalizados usando subclasses da classe ControlBase.

Para criar um controle personalizado que possa ser usado, é necessário substituir o método initControlWithMap() da ControlBase. Você precisará chamar o método de superclassificação desse método de substituição. Além disso, é necessário especificar uma ControlPosition no construtor do controle.

Neste exemplo, criamos um controle de zoom simples que contém links textuais, e não os ícones gráficos usados no controle de zoom padrão do 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 exemplo (ControlCustom.html)

Ver código-fonte (TextualZoomControl.as)