Incluye licencia y asistencia para empresas.
Las superposiciones son objetos del mapa vinculados a coordenadas de latitud y longitud, por lo que se mueven al arrastrar o aplicar el acercamiento sobre el mapa. Las superposiciones representan objetos que se añaden al mapa para designar puntos, líneas o zonas.
El API de Google Maps incorpora varios tipos de superposiciones:
| 
Marker y pueden utilizar objetos visuales personalizados como iconos.Polyline.TileLayerOverlay) o incluso mediante la creación de tu tipo de mapa con un parámetro MapType.InfoWindow adjunto en cada mapa.Cada superposición amplía la interfaz IOverlay. Las superposiciones se pueden añadir al mapa mediante el método Map.addOverlay() y se pueden eliminar mediante el método Map.removeOverlay(). (Ten en cuenta que la ventana de información se añade al mapa de forma predeterminada, aunque no es visible inicialmente).
Los marcadores identifican puntos del mapa. El constructor de Marker utiliza LatLng y un objeto opcional MarkerOptions como argumentos. Este objeto MarkerOptions permite anular las implementaciones predeterminadas para marcadores.
Los marcadores están diseñados para ser interactivos. De forma predeterminada, reciben eventos MapMouseEvent.CLICK, por ejemplo, y se suelen utilizar dentro de detectores de eventos para abrir ventanas de información.
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
var markerA:Marker = new Marker(
new LatLng(48.858842, 2.346997),
new MarkerOptions({
strokeStyle: new StrokeStyle({color: 0x987654}),
fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
radius: 12,
hasShadow: true
}));
map.addOverlay(markerA);
}
Ver ejemplo (MarkerSimple.html)
Ver origen (MarkerSimple.mxml)
Los marcadores son objetos interactivos en los que puedes hacer clic para arrastrarlos a una nueva ubicación. En este ejemplo, colocamos un marcador arrastrable en el mapa y detectamos algunos de los eventos más sencillos. Los marcadores que se pueden arrastrar implementan cuatro tipos de eventos para indicar su estado de arrastre: CLICK, DRAG_START, DRAG y DRAG_END. De forma predeterminada, es posible hacer clic en los marcadores pero no arrastrarlos, por lo que es necesario inicializarlos con la propiedad MarkerOption adicional draggable definida como verdadera.
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
var marker:Marker = new Marker(getCenter(), new MarkerOptions({draggable: true}));
marker.addEventListener(MapMouseEvent.DRAG_START, function(event:Event):void {
map.closeInfoWindow();
});
marker.addEventListener(MapMouseEvent.DRAG_END, function(event:Event):void {
marker.openInfoWindow(new InfoWindowOptions({content:"Just bouncing along..."}));
});
map.addOverlay(marker);
}
De forma predeterminada, los marcadores utilizan una miniburbuja estándar de Google similar a la que se muestra en maps.google.com para indicar los emplazamientos. Para modificar el diseño estándar de un marcador (Marker), especifica MarkerOptions al crear el marcador. Por ejemplo, si el marcador (Marker) se crea con una propiedad MarkerOptions.label, también mostrará ese carácter alfanumérico en la geometría del marcador.
Los marcadores también pueden definir un objeto de visualización (DisplayObject) gráfico para que se muestre en lugar del predeterminado. Por lo general, los iconos se definen mediante la especificación de las siguientes propiedades:
icon define el icono como un objeto de visualización (DisplayObject).iconAlignment define cómo se fija el icono al punto de referencia para la ubicación del marcador. Los siguientes valores son válidos:
iconOffset define un desplazamiento (utilizado de forma conjunta con la alineación de icono (iconAlignment) superior) como valor de píxel Point {x,y}.
private function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
var markerA:Marker = new Marker(
new LatLng(48.858842, 2.346997),
new MarkerOptions({
strokeStyle: new StrokeStyle({color: 0x987654}),
fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}),
radius: 12,
hasShadow: true
})
);
map.addOverlay(markerA);
}
Ver origen (IconSimpleSimple.mxml)
Los objetos Polyline crean una superposición lineal en el mapa. Un objeto Polyline consta de una serie de puntos y crea segmentos de líneas que conectan dichos puntos en una secuencia ordenada.
Las polilíneas se dibujan como una serie de segmentos rectos en el mapa. Puedes especificar valores personalizados de color, densidad de línea y opacidad para las líneas. Los colores deben utilizar un valor numérico en com.google.maps.Color. Polyline no entiende los colores expresados mediante nombres.
Los atributos de polilínea se especifican en un objeto PolylineOptions. Actualmente se admiten las siguientes opciones de polilínea:
geodesic especifica que la polilínea se debe dibujar entre dos puntos como punto geodésico ("gran círculo").strokeStyle especifica el estilo de trazo (StrokeStyle) que se utilizará cuando se dibuje la polilínea.El siguiente fragmento de código crea una polilínea roja de 4 píxeles de ancho entre dos puntos:
private function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
// Polyline overlay.
var polyline:Polyline = new Polyline([
new LatLng(37.4419, -122.1419),
new LatLng(37.4519, -122.1519)
], new PolylineOptions({ strokeStyle: new StrokeStyle({
color: 0xFF0000,
thickness: 4,
alpha: 0.7})
}));
map.addOverlay(polyline);
}
Ver ejemplo (PolylineSimple.html)
Ver origen (PolylineSimple.mxml)
El objeto Polyline de un mapa de Google Maps denota una línea como serie de puntos, haciendo que resulte sencilla de utilizar, pero no necesariamente compacta. Las líneas largas y complejas requieren una gran cantidad de memoria y puede ser necesario más tiempo para dibujarlas. Además, los segmentos individuales dentro de una polilínea no codificada se dibujan en el mapa, sea cual sea su resolución en niveles mayores de acercamiento.
El API de Google Maps para Flash permite representar rutas mediante polilíneas codificadas, que expresan una serie de puntos de una polilínea (Polyline) mediante un formato comprimido de caracteres ASCII.
Aparecerá una polilínea (Polyline) codificada a continuación (de momento, no te preocupes por los aspectos concretos del algoritmo de codificación).
// Add an encoded polyline.
var encodedPoints:String = "iuowFf{kbMzH}N`I@yzCv^k@?mI";
var encodedLevels:String = "B?B";
var encodedPolyline:Polyline = Polyline.fromEncoded(
new EncodedPolylineData(encodedPoints, 32, encodedLevels, 4),
new PolylineOptions({ strokeStyle: new StrokeStyle({
color: 0x0000ff,
thickness: 4,
alpha: 0.7})
}));
map.addOverlay(encodedPolyline);
}
Hay dos cosas que debes tener en cuenta sobre este código.
Polyline básico se emplean los valores habituales de latitud y longitud. El algoritmo para crear los puntos como una serie de valores ASCII codificados se documenta aquí. Este algoritmo es necesario si deseas calcular polilíneas codificadas sobre la marcha mediante un proceso de servidor, por ejemplo..
Polyline no codificados y resulta especialmente útil para que los dibujos se realicen rápidamente con niveles de acercamiento elevados, en los que los detalles de algunos segmentos de líneas pueden no ser relevantes. Por ejemplo, una polilínea codificada que represente un itinerario en coche de Nueva York a Chicago no debe tener en cuenta los segmentos de líneas que representen calles concretas cuando el acercamiento del mapa esté en el nivel del estado.
Ver ejemplo (PolylineEncoding.html)
Ver origen (PolylineEncoding.mxml)
Consulta Algoritmo de polilínea para obtener información sobre el algoritmo de polilínea codificada subyacente.
Los objetos Polygon se parecen a los objetos Polyline en que consisten en una serie de puntos en una secuencia ordenada. No obstante, en lugar de tener extremos abiertos, los polígonos están diseñados para definir las regiones con un bucle cerrado. Al igual que con las polilíneas, es posible definir valores personalizados de color, densidad de línea y opacidad para el borde del polígono (la línea) y de color y opacidad para el relleno de la región delimitada. Los colores se deben corresponder con un valor numérico de com.google.maps.Color.
El siguiente fragmento de código crea un cuadro de 10 píxeles de ancho entre cuatro puntos: Ten en cuenta que este polígono se "cierra" mediante la devolución de la ruta de segmento a su punto inicial; debes cerrar siempre los polígonos para evitar un comportamiento no definido.
private function onMapReady(event:MapEvent):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
var latlng:LatLng = getCenter();
var lat:Number = latlng.lat();
var lon:Number = latlng.lng();
var latOffset:Number = 0.01;
var lonOffset:Number = 0.01;
var polygon:Polygon = new Polygon([
new LatLng(lat, lon - lonOffset),
new LatLng(lat + latOffset, lon),
new LatLng(lat, lon + lonOffset),
new LatLng(lat - latOffset, lon),
new LatLng(lat, lon - lonOffset)
],
new PolygonOptions({
strokeStyle: new StrokeStyle({
color: 0x0000ff,
thickness: 10,
alpha: 0.7}),
fillStyle: new FillStyle({
color: 0x0000ff,
alpha: 0.7})
}));
map.addOverlay(polygon);
}
Ver ejemplo (PolygonSimple.html)
Ver origen (PolygonSimple.mxml)
Los polígonos son superposiciones útiles para representar zonas de tamaño arbitrario, pero no pueden mostrar imágenes. Si tienes una imagen que deseas colocar en un mapa, puedes utilizar un objeto GroundOverlay. El constructor de
GroundOverlay requiere una dirección URL de imagen y el objeto LatLngBounds de la imagen como parámetros.
En el siguiente ejemplo, colocamos un mapa antiguo de Newark (Nueva Jersey) en el mapa en forma de superposición:
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(40.740, -74.18), 12, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new MapTypeControl());
var testLoader:Loader = new Loader();
var urlRequest:URLRequest = new URLRequest("http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg");
testLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void {
var groundOverlay:GroundOverlay = new GroundOverlay(
testLoader,
new LatLngBounds(new LatLng(40.716216,-74.213393), new LatLng(40.765641,-74.139235)));
map.addOverlay(groundOverlay);
});
testLoader.load(urlRequest);
}