API Google Maps pour Flash (suite)

Dans le précédent article (API Google Maps pour Flash), on a vu comment préparer et configurer son éditeur pour gérer l’API Google Maps.

On va maintenant faire un tour d’horizon des fonctionnalités, des options, des composants et des évènements.
nb : Cette fois ci, je vais éviter de recopier l’intégralité du code de chaque classe, je vais me contenter d’afficher les lignes importantes.


Voici le code de base pour afficher la carte sur la scène :

			var _map:Map = new Map();
			_map.language = "fr_FR";
			_map.countryCode = "FR";
			// la clé (unique par site/utilisateur)
			_map.key = "ABQIAAAAvwdr5PrLsm228aByyJiTFRQ5NISJ_vEU2QZeuqsHywIYKJUzMhS0KqAO5rT_XJ07lAzKRjs3aZG6eQ";
			_map.setSize(new Point(stage.stageWidth, stage.stageHeight));
			this.addChild(_map);

Si on veut définir des options tel que le niveau de zoom, la position de départ, le type de la carte …., on peut le faire dans l’évènement MapEvent.MAP_PREINITIALIZE :

		// ajout de l'évènement
		_map.addEventListener(MapEvent.MAP_PREINITIALIZE, evtMapPreinitialize);
 
 
		// EVENEMENT -> INITIALISATION MAP (définition des options)
		private function evtMapPreinitialize(ev:MapEvent):void {
			var mapO:MapOptions = new MapOptions();
			mapO.zoom = 13;// Le niveau de zoom
			mapO.center = new LatLng(48.790367,2.656885);// On centre la carte sur la latitude et longitude de ma ville
			mapO.mapType = MapType.HYBRID_MAP_TYPE;// le type de carte
			_map.setInitOptions(mapO);
		}

Pour les marqueurs et les lignes (sur-couches) qui doivent être ajoutés aprés le chargement de la carte, il faut le faire dans l’évènement MapEvent.MAP_READY :

		// ajout de l'évènement
		_map.addEventListener(MapEvent.MAP_READY, evtMapReady);
 
 
 
		// EVENEMENT -> CHARGEMENT MAP (ajout des marqueurs et des lignes)
		private function evtMapReady(ev:MapEvent):void {
			// définition de 2 positions
			var _positionRoissy:LatLng = new LatLng(48.790367,2.656885);
			var _positionGarePontault:LatLng = new LatLng(48.805843, 2.617828);
 
 
			// options du 1er marqueur : couleur, texte, taille, ....
			var m:MarkerOptions = new MarkerOptions( 
			{ 
				fillStyle: { color:0xFF0000 },
				strokeStyle: { color:0, thickness:1 },
				tooltip:"Roissy en brie",
				radius:20,
				hasShadow:true,
				draggable:false
			}
			);
			// ajout du 1er marqueur à la carte (position+options)
			_map.addOverlay(new Marker(_positionRoissy, m));
 
			// options du 2eme marqueur : couleur, texte, taille, ....
			m = new MarkerOptions( 
			{ 
				fillStyle: { color:0x00FF00 },
				strokeStyle: { color:0, thickness:1 },
				tooltip:"la gare de pontault",
				radius:20,
				hasShadow:true,
				draggable:false
			}
			);
			// ajout du 2eme marqueur à la carte (position+options)
			_map.addOverlay(new Marker(_positionGarePontault, m));
 
 
			// Options du trait
			var po:PolylineOptions = new PolylineOptions({ strokeStyle: new StrokeStyle({
				color: 0xFF0000,
				thickness: 4,
				alpha: 0.7})
			});
			// dessiner un trait entre les 2 positions
			var pl:Polyline = new Polyline([_positionRoissy, _positionGarePontault], po);
			_map.addOverlay(pl);
		}

Pour l’instant notre carte est toujours très pauvre, c’est le moment de rajouter les composants (contrôles), dans l’évènement MapEvent.MAP_READY :

		// EVENEMENT -> CHARGEMENT MAP
		private function evtMapReady(ev:MapEvent):void {
			// ajout des controles
			_map.addControl(new MapTypeControl());
			_map.addControl(new OverviewMapControl());
			_map.addControl(new NavigationControl());
 
			var sco:ScaleControlOptions = new ScaleControlOptions();
			sco.labelFormat = new TextFormat('Arial', 12, 0xFFFFFF, true);
			sco.units = ScaleControlOptions.UNITS_METRIC_ONLY;
			_map.addControl(new ScaleControl(sco));
		}

Maintenant, il serait sympa de rajouter une fonctionnalité qui manque à Google Maps dans Flash : la possibilité de changer le niveau de zoom avec la roulette de la souris :

		// ajout de l'évènement
		_map.addEventListener(MouseEvent.MOUSE_WHEEL, evtMapMouseWheel);
 
 
		// EVENEMENT -> ZOOM SUR LA CARTE AVEC LA ROULETTE DE LA SOURIS
		private function evtMapMouseWheel(ev:MouseEvent):void {
			// recuperer le zoom actuel et l'incrémenter ou le décrémenter suivant la
			// direction de la roulette de la souris en limitant le pas à 1
			var z:Number = _map.getZoom() + (ev.delta > 1 ? 1 : -1);
			z = (z > 20 ? 20 : z);
 
			// Zoomer sur la carte en utilisant son centre
			//_map.setCenter(_map.getCenter(), z);
			// ou
			// Zoomer sur la carte en la centrant sur la position de la souris
			var pos:LatLng = _map.fromViewportToLatLng(new Point(_map.mouseX, _map.mouseY));
			_map.setCenter(pos, z);
		}

Pour le prochain article sur Google Maps, on verra comment rajouter un zoom basé sur un rectangle de sélection.

Laisser un commentaire

*