Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en mai 2009..
Dans ce didacticiel, nous verrons comment créer une carte dans Flash à l'aide de l'API Google Map. Nous aborderons quelques notions de base, telles que le zoom avant sur la carte et l'ajout de contrôles. Nous verrons également comment ajouter des marqueurs à notre carte et comment charger des données à l'aide d'un fichier XML..
Avant de pouvoir créer notre carte en Flash, nous devons configurer quelques éléments. Pour utiliser l'API Google Map, vous aurez besoin d'une clé API personnelle. Pour ce faire, consultez la page http://code.google.com/intl/nl/apis/maps/documentation/flash/ et cliquez sur le lien situé à droite de la page "Inscrivez-vous pour obtenir une clé d'API Google Maps"..
En cliquant sur le lien "S'inscrire pour une clé API Google Maps", nous nous rendons à la page suivante où nous pouvons générer notre clé API personnelle. Faites défiler la page, acceptez les conditions d'utilisation (vous pouvez également les lire si vous êtes vraiment intéressé) et ajoutez l'URL du site Web sur lequel vous souhaitez utiliser l'application (vous aurez besoin d'une clé API différente pour chaque domaine où vous voulez placer une carte). Après cela, cliquez sur "Générer la clé API".
Vous verrez maintenant votre clé API personnelle pour le domaine sélectionné. Copiez la clé API et collez-la ou sauvegardez-la quelque part car nous en aurons besoin très bientôt.
Ok, nous avons maintenant notre clé API, mais nous avons encore besoin de quelque chose avant de pouvoir commencer à créer notre carte en Flash. Nous devons télécharger le composant SWC de Google Map. Pour ce faire, accédez à http://code.google.com/intl/nl/apis/maps/documentation/flash/ et cliquez sur "Télécharger l'API Google Maps pour Flash SDK". Une fenêtre contextuelle apparaît, choisissez d’enregistrer le fichier "sdk.zip" et de le télécharger..
Nous devons maintenant installer le composant SDK pour l’utiliser dans Flash. Pour ce faire, accédez à l'emplacement où vous avez enregistré l'API Google Maps pour le SDK Flash et recherchez la version non-Flex de la bibliothèque d'interface. Dans mon cas, c'est (lib / map_1_9.swc). Maintenant copiez le fichier "map_1_9.swc".
Ensuite, si Flash est actuellement ouvert, quittez l’application et recherchez ce dossier:
Dans ce dossier, créez un nouveau dossier nommé "google" et collez-y le fichier "map_1_9.swc". Flash est maintenant configuré pour prendre en charge l'API Google Maps pour Flash..
D'accord. C'est tout fait et dépoussiéré! Maintenant, nous pouvons enfin commencer à créer notre carte en Flash. Démarrez Flash CS3 ou CS4 et créez un nouveau fichier ActionScript 3.0, taille d'étape par défaut (550 x 400)..
Maintenant, sauvegardez simplement le fichier; appuyez sur "Ctrl + S" ou allez dans Fichier> Enregistrer dans le menu. Enregistrez-le à l'emplacement de votre choix et nommez-le comme vous le souhaitez. Je l'appellerai "google_map".
Ouvrez le panneau Composants "Ctrl + F7" ou cliquez sur Fenêtre> Composants dans le menu et faites glisser la bibliothèque GoogleMapsLibrary sur la scène..
Créez un nouveau calque, double-cliquez sur son nom et renommez-le "actions".
Maintenant, avec le calque actions sélectionné, ouvrez le panneau Actions en appuyant sur "F9" ou en cliquant sur Fenêtre> Actions. Ajoutez ces lignes de code:
importer com.google.maps.LatLng; importer com.google.maps.Map; importer com.google.maps.MapEvent; importer com.google.maps.MapType;
Ajoutons maintenant la carte! Lorsque nous chargeons le film, ce morceau de code créera une carte et la placera sur la scène. Dans le code, nous voyons la variable "map.key"; Ici, nous devons ajouter notre clé API personnelle. Ouvrez le fichier où vous avez enregistré la clé API et copiez / collez-le dans la variable.
// Créer la carte map map: Map = new Map (); map.key = "Votre clé API ici"; map.setSize (nouveau point (stage.stageWidth, stage.stageHeight)); this.addChild (carte);
Ok, allez maintenant tester votre film "Ctrl + Entrée" ou cliquez sur Contrôle> Tester le film dans le menu et vous verrez que vous venez de créer une carte..
A ce stade, nous ne pouvons que faire glisser la carte. Ce n'est pas vraiment ce que nous recherchons, ajoutons quelques contrôles à la carte pour nous permettre de zoomer et de nous déplacer. Pour ajouter des contrôles à notre carte, nous devons mettre à jour notre code. Nous devons d’abord appeler quelques classes supplémentaires:
importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl;
Après cela, nous devons créer une nouvelle fonction à appeler une fois la carte créée. Nous appelons cette fonction "onMapReady ()". Dans cette fonction, nous ajoutons nos contrôles à la carte.
fonction onMapReady (event: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Nous devons maintenant appeler la fonction "onMapReady ()" chaque fois que notre carte est chargée. Pour ce faire, nous devons ajouter une ligne supplémentaire à notre premier morceau de code..
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Notre code complet ressemble maintenant à ceci:
importer com.google.maps.LatLng; importer com.google.maps.Map; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; // Créer la carte map map: Map = new Map (); map.key = "Votre clé API ici"; map.setSize (nouveau point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (carte); fonction onMapReady (event: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Maintenant, testez votre film "Ctrl + Entrée" ou cliquez sur Contrôle> Tester le film dans le menu et vous verrez que notre carte a maintenant des contrôles. Nous sommes en mesure de faire un zoom avant et même de changer notre carte en vue Satellite, hybride et Terrain. C'est très cool mais on en veut plus?
Zoomons sur un emplacement spécifique une fois notre carte chargée pour la première fois. Supposons que je suis un surfeur et que je souhaite créer une carte des spots de surf de ma ville natale. Nous ne voulons pas que les gens soient obligés de zoomer manuellement et de rechercher la zone, nous allons donc régler le problème dans une seconde. La seule chose que nous devons ajouter est une petite ligne de code à notre fonction "onMapReady ()".
map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE);
Ce que nous faisons en réalité ici est de créer un nouveau point LatLng sur la carte. Premièrement, nous spécifions 2 valeurs: la "latitude" et la "longitude" de notre région. Ensuite, nous définissons notre valeur de zoom; J'ai choisi d'utiliser 9. Le zoom va de 0 à environ 16 (cela peut varier d'une région à l'autre). Enfin, nous définissons le type de carte; J'ai opté ici pour le HYBRID_MAP_TYPE.
Notre fonction "onMapReady ()" ressemble maintenant à ceci:
function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nouveau ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ());
Si nous testons notre film, vous constaterez que beaucoup de choses ont changé. Une fois la carte chargée, nous zoomons sur notre région spécifique et notre type de carte est désormais hybride. Pour déterminer la latitude et la longitude de votre région, vous pouvez utiliser Google Earth ou un outil en ligne tel que http://itouchmap.com/latlong.html..
Ajoutons maintenant un marqueur simple à notre carte. Ajoutez simplement 2 classes supplémentaires:
importer com.google.maps.overlays.MarkerOptions; importer com.google.maps.overlays.Marker;
et mettez à jour la fonction "onMapReady ()" avec ce morceau de code:
var marker: Marker = new Marker (nouveau LatLng (28.74659, -13.93447)); map.addOverlay (marqueur);
Encore une fois, nous créons un point LatLng avec des valeurs de latitude / longitude spécifiques pour notre position. Ensuite, nous appelons "addOverlay ()" pour placer notre marqueur sur la carte. Notre code complet ressemble maintenant à ceci:
importer com.google.maps.LatLng; importer com.google.maps.Map; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; importer com.google.maps.overlays.MarkerOptions; importer com.google.maps.overlays.Marker; // Créer la carte map map: Map = new Map (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize (nouveau point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (carte); function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nouveau ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); var marker: Marker = new Marker (nouveau LatLng (28.74659, -13.93447)); map.addOverlay (marqueur);
Allez tester votre film. Vous verrez notre marqueur sur la carte.
Passons maintenant au niveau suivant. Nous avons une carte avec des contrôles de zoom et un marqueur. De quoi avons-nous besoin de plus? Eh bien, je vais vous dire. Nous avons besoin de PLUS DE MARQUEURS, D'OUTILS ET D'INFOS WINDOWS et nous voulons tout charger à partir d'un fichier XML. Alors, commençons. Nous allons d'abord créer notre fichier XML. Ouvrez votre éditeur XML favori et créez ce fichier:
28.74659 -13.93447 Majanicho 28.738764 -13.955126 Derecha de los Alemanes 28.741022 -13.951821 Le Bubbel
Une fois notre carte chargée, nous devons extraire les données XML dans notre fichier Flash. Créez une nouvelle fonction nommée "xmlLoader ()" et nous l'appellerons dans notre fonction "onMapReady ()". Nous devons d’abord supprimer le code que nous avons ajouté pour créer notre marqueur quelques étapes auparavant. Ensuite, nous ajouterons la ligne pour appeler la fonction "xmlLoader ()". Notre fonction "onMapReady ()" devrait maintenant ressembler à ceci:
function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nouveau ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader ();
Ensuite, nous voulons créer la fonction "xmlLoader ()".
fonction xmlLoader ()
Dans la prochaine étape, nous allons le remplir.
Ok nous y sommes. Chargeons nos données XML. Dans la fonction "xmlLoader ()", nous ajoutons ce code:
Accentsconagua
function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); // fin de la fonction loadXML var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (new URLRequest ("xml.xml")); Cela nous permettra de travailler avec nos données XML.
Comme nous avons 3 emplacements dans notre fichier XML, nous devrons créer une boucle "For" et stocker toutes les données dans des tableaux. Dans notre fonction "loadXML ()", nous ajoutons ce morceau de code pour créer la boucle For:
pour (var i: nombre = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip); // end of for loop
Pour tester si les choses fonctionnent pour nous, nous allons suivre la variable "title_tip". Testez votre film et vous devriez obtenir le résultat suivant:
Ensuite, nous devons créer des variables pour stocker nos données chargées à partir du fichier XML. Dans notre boucle For, nous ajoutons ces variables:
var latlng: LatLng = new LatLng (map_xml.location [i] .lat, map_xml.location [i] .lon); var tip = map_xml.location [i] .name_tip; var myTitle: String = map_xml.location [i] .title_tip; var myContent: String = map_xml.location [i] .content_tip;
Si vous le souhaitez, vous pouvez supprimer la ligne "trace ()" que nous utilisions auparavant. Notre boucle For ressemble maintenant à ceci:
pour (var i: nombre = 0; i < map_xml.location.length(); i++) var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; // end of for loop
D'accord! Nous devons ajouter un marqueur à la carte pour chacun de nos trois emplacements. Maintenant que nous avons toutes les données stockées dans nos variables, nous devrons créer une nouvelle fonction nommée "createMarker ()". Dans notre fonction "loadXML ()", nous ajoutons cette nouvelle fonction:
// Ajout de marqueurs sur la fonction de la fonction createMarker (Latlng: LatLng, number: Number, tip, myTitle, myContent): Marker var i: Marqueur = new Marker (latlng, new MarkerOptions (hasShadow: true, tooltip: "" + pointe ) ); retourne i; // fonction de fin createMarker
Nous devons encore appeler cette fonction "createMarker ()" afin de voir nos marqueurs sur la carte. Pour ce faire, nous devons ajouter une ligne de code supplémentaire à la fin de notre boucle For:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
Voici à quoi devrait ressembler notre fonction "loadXML ()":
function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); pour (var i: nombre = 0; i < map_xml.location.length(); i++) var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent)); // end of for loop // Add Markers On The Map function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker var i:Marker = new Marker( latlng, new MarkerOptions( hasShadow: true, tooltip: ""+tip ) ); return i; // end function createMarker // end of loadXML function
Testez votre film et vous verrez les marqueurs sur la carte! Notez que nos 3 points sont très proches les uns des autres, vous pouvez donc zoomer un peu pour les voir plus clairement..
Enfin, nous devons ajouter des fenêtres d’information. Si nous cliquons sur les marqueurs, nous obtiendrons des informations sur leurs emplacements. Pour ce faire, nous devons ajouter 2 classes supplémentaires:
importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent;
? un peu plus de code pour notre fonction "createMarker ()"?
i.addEventListener (MapMouseEvent.CLICK, fonction (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nouvelle InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);));
Maintenant, testez votre film et vous verrez que nos marqueurs sont désormais cliquables et qu’ils créent une fenêtre d’information avec du texte à partir du fichier XML..
C'est tout! Jetez un oeil à notre code final:
importer com.google.maps.LatLng; importer com.google.maps.Map; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.controls.ZoomControl; importer com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; importer com.google.maps.overlays.MarkerOptions; importer com.google.maps.overlays.Marker; importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent; // Créer la carte map map: Map = new Map (); map.key = "Votre clé API ici"; map.setSize (nouveau point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (carte); function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nouveau ZoomControl ()); map.addControl (new PositionControl ()); map.addControl (new MapTypeControl ()); xmlLoader (); function xmlLoader () function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); pour (var i: nombre = 0; i < map_xml.location.length(); i++) var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon); var tip = map_xml.location[i].name_tip; var myTitle:String = map_xml.location[i].title_tip; var myContent:String = map_xml.location[i].content_tip; map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent)); // end of for loop // Add Markers On The Map function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker var i:Marker = new Marker( latlng, new MarkerOptions( hasShadow: true, tooltip: ""+tip ) ); i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void map.openInfoWindow(event.latLng, new InfoWindowOptions( titleHTML: ""+myTitle, contentHTML: ""+myContent )); ); return i; // end function createMarker // end of loadXML function var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("xml.xml")); Testez votre film Ctrl + Entrée pour vérifier le résultat. Vous aurez votre propre carte Flash basée sur XML! Vous pouvez l'utiliser sur votre site Web, modifier les emplacements à votre guise, à vous de choisir. Allez-y et expérimentez, si vous avez des résultats intéressants, assurez-vous de les partager avec nous..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
