LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Dibujar polígono API Google Maps Actionscript 3 – Polygon

| 3 Comments

Siguiendo con los ejemplos, en este caso continuamos el mismo código del ejemplo anterior pero le sumamos la posibilidad de dibujar una zona determinada del mapa con las opciones de Polygon.

Actionscript:
  1. import com.google.maps.Map;
  2. import com.google.maps.MapEvent;
  3. import com.google.maps.MapType;
  4. import com.google.maps.controls.*;
  5. import com.google.maps.LatLng;
  6. //IMPORTAMOS LA CLASE PARA TRABAJAR CON MARCADORES
  7. import com.google.maps.overlays.*;
  8. //importamos la clase para trabajar con opciones para los marcadores
  9. import com.google.maps.overlays.MarkerOptions;
  10. //clase para trabajar con eventos del mouse
  11. import com.google.maps.MapMouseEvent;
  12. //clase requerida para desplegar una ventana
  13. import com.google.maps.InfoWindowOptions;
  14. //clases para trabajar con rellenos y filetes
  15. import com.google.maps.styles.FillStyle;
  16. import com.google.maps.styles.StrokeStyle;
  17. //clases para dibujar un poligono
  18. import com.google.maps.overlays.Polygon;
  19. import com.google.maps.overlays.PolygonOptions;
  20.  
  21. var map:Map = new Map();
  22. //CREAMOS UNA VARIABLE CON EL TIPO MARKER
  23. var marker:Marker;
  24.  
  25. map.key="ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
  26. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  27. map.setSize(new Point(stage.stageWidth, stage.stageHeight));
  28. this.addChild(map);
  29.  
  30. function onMapReady(event:Event):void {
  31.     //centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
  32.     map.setCenter(new LatLng(-31.409619,-64.184532), 15, MapType.NORMAL_MAP_TYPE);
  33.     map.addControl(new ZoomControl());
  34.     map.addControl(new PositionControl());
  35.     map.addControl(new MapTypeControl());
  36.     //en la libreria cramos un Sprite con el nombre de clase Icono
  37.     //creamos una variable opciones y guardamos el icono
  38.     var opciones:MarkerOptions=new MarkerOptions({icon:new Icono()});
  39.     //CREAMOS UN NUEVO OBJETO CON LAS COORDENADAS DEL MARCADOR
  40.     //y agregamos como parametro las opciones antes modificadas
  41.     marker=new Marker(new LatLng(-31.40949996324042, -64.18445689814757),opciones);
  42.    
  43.     //agregamos un detector de evento para el clic sobre el marcador
  44.     marker.addEventListener(MapMouseEvent.CLICK, ClickMarket);
  45.     //por si quieren saber las coordenadas de un punto descomenten la linea 49
  46.     map.addEventListener(MapMouseEvent.CLICK,mapClic);
  47.     function mapClic(e:MapMouseEvent):void {
  48.         //trace(e.latLng);
  49.     }
  50.     //creamos un poligono dibujando lineas
  51.     var polygon:Polygon=new Polygon([
  52.     //desde
  53.     new LatLng(-31.40949996324042, -64.18445689814757),
  54.     //hasta
  55.     new LatLng(-31.409783819879326, -64.1834162010498),
  56.     //desde
  57.     new LatLng(-31.41198139060486, -64.18427450793456),
  58.     //hasta
  59.     new LatLng(-31.411688384148704, -64.1853259338684)],
  60.     //agregamos las opciones de relleno y filete
  61.     new PolygonOptions({strokeStyle:new StrokeStyle({color:0x000000,thickness:1,alpha:0.7}),fillStyle:new FillStyle({color:0xFF0000,alpha:0.8})}));
  62.     //agregamos el poligono a la visualizacion del mapa
  63.     map.addOverlay(polygon);
  64.     //agregamos el marcador a la visualizacion del mapa
  65.     map.addOverlay(marker);
  66. }
  67.  
  68. //el contenido del globo del marcador
  69. var Texto:String="<b>LeoBaraldi</b> <br/> Juan de los Palotes 225";
  70.  
  71. function ClickMarket(e:MapMouseEvent):void {
  72.     //mostramos el globo y su contenido
  73.     marker.openInfoWindow(new InfoWindowOptions({contentHTML:Texto,pointOffset: new Point(0, -35)}));
  74. }

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, amplios conocimientos en CEO. Desarrollador de sitios multi plataformas, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Profesor de Diseño y Diseño Web en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

3 Comments

  1. Muchas gracias!!!

    era justo lo que estaba buscando. tenes idea como hacer zoom con la ruedita del mouse? mira ese link comko lo hace:
    www(.)garrahand(.)com/gmapapiingles(.)swf

    saludoss!

  2. Hola Leo, tengo que hacer un proyecto en googlemaps y quisiera saber si conoces alguna herramienta que te diga todos los puntos geodésicos o de límites de un país, para armar sus respectivos polígonos, muy bueno tu ejemplo! gracias!

  3. Hola Leo! Tanto tiempo! .. no se si te acordas de mi.. Che, justo tengo una consulta sobre esto. Tengo un mapa funcionando perfectamente pero necesito remover un mapa y poner otro... lo que hago es algo para remover el mapa es esto:
    if (map != null) { this.removeChild(map);
    map = null;
    }

    Con eso basta o hay una manera mas limpia de hacerlo para que no quede basura del mapa que fue removido?? Pregunto porque lo ideas es eliminar eventos y todos los objectos.. según entiendo.

    Desde ya muchas gracias y cuando quieras hablamos.

    Un abrazo!

Deja un comentario

Required fields are marked *.

*