![]()
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.
![]()