Share
Après une réponse aussi positive à mon premier tutoriel. Implémentation d'une carte à l'aide de l'API Google Map pour Flash, j'ai décidé d'écrire une seconde. Depuis lors, l'API Google Map a été mise à jour, permettant aux développeurs d'ajouter (entre autres choses) la visualisation 3D aux cartes. C'est une fonctionnalité intéressante et au cours de ce tutoriel, je vais vous expliquer comment l'utiliser..
En outre, de nombreuses personnes ont demandé une explication sur l’ajout de marqueurs personnalisés; c'est la deuxième chose que nous allons discuter ici aujourd'hui.
Je ne construirai pas plus sur notre carte précédente car nous devons télécharger le nouveau composant Google Map. Il n’ya aucun moyen d’utiliser le composant de mon précédent tutoriel car celui-ci ne supporte pas les fonctions 3D. Alors… allez à http://code.google.com/intl/nl/apis/maps/documentation/flash/
Nous devons installer le composant SDK pour l’utiliser en Flash. Pour ce faire, accédez à l'emplacement où vous avez enregistré le composant Google Maps SDK et recherchez la version non Flex de la bibliothèque d'interface. Dans mon cas, c'est (lib / map_1_18.swc). Maintenant, copiez le fichier "map_1_18.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_18.swc". Flash est maintenant configuré pour
prendre en charge l'API Google Maps pour Flash.
Ok, nous avons le composant maintenant, mais avant de pouvoir travailler, nous avons toujours besoin d’une clé d’API Google Map pour que notre carte fonctionne en ligne. Une clé Google Map API est gratuite et vous pouvez en obtenir une ici:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
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, le travail ennuyeux est terminé, maintenant nous pouvons commencer avec les trucs amusants! Explorons Flash et créons un nouveau fichier ActionScript 3.0, taille d'étape par défaut (550 x 400)..
Je préfère commencer par enregistrer le fichier. Pendant que je travaille, j'aime beaucoup Taper tout le temps "Ctrl + S", alors vas-y, frappe
"Ctrl + S" ou cliquez sur "Fichier> Enregistrer" dans le menu. Enregistrez-le à l'emplacement de votre choix et nommez-le comme vous le souhaitez. Je vais le nommer
"Google Map".
Ouvrez le panneau Composants "Ctrl + F7" ou cliquez sur Fenêtre> Composants dans le menu. Faites glisser la bibliothèque GoogleMaps dans votre bibliothèque..
Pour rester organisé, j'aime bien renommer le premier calque en "actions".
Avec le calque actions sélectionné, ouvrez le panneau des actions (appuyez sur "F9" ou cliquez sur "Fenêtre> Actions") et ajoutez les lignes de code suivantes:
importer com.google.maps.LatLng; importer com.google.maps.Map; importer com.google.maps.Map3D; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.View; importer com.google.maps.geom.Attitude;
Maintenant, nous allons créer notre première fonction. Nous voulons d'abord déclarer notre variable Map:
// Variables var map: Map3D;
Maintenant, nous pouvons ajouter notre fonction que nous appellerons pour ajouter la carte principale sur la scène:
// Fonction qui ajoute la carte sur la fonction de la scène add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (nouveau point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (carte);
OK, comme vous pouvez le constater, nous avons ajouté un eventlistener qui se déclenchera une fois notre carte chargée. Créons donc également cette fonction:
// Fonction qui sera déclenchée une fois la carte créée Fonction onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.setAttitude (nouvelle attitude (20,30,0));
Ici, nous avons mis la carte au centre. Cette fonction a 3 valeurs et définira l'emplacement où la carte s'ouvrira. le
les valeurs sont comme ceci "map.setCenter (new LatLng (latitude, longitude), Zoom); ". Ensuite, nous définissons le mode d'affichage;
comme nous utilisons la nouvelle carte 3D, je vais utiliser la vue en perspective. Si vous aimez une vue normale de la carte, vous pouvez changer cette valeur en
"View.VIEWMODE_2D".
Ensuite, nous définissons l'attitude. Cela va définir comment nous visualisons la carte. Dans ce cas, nous y ajouterons une petite vue en perspective et
tournez légèrement la carte pour créer un angle de vue plus agréable. Vous pouvez jouer un peu avec ces valeurs et voir ce que vous préférez.
OK, il est temps de faire un premier contrôle! Qu'avons-nous jusqu'à présent? Eh bien, rien encore! Nous devons d’abord appeler notre fonction pour créer le
carte! Ajoutons cette ligne de code juste sous nos variables:
// Variables var map: Map3D; // Appelez la fonction pour créer la carte add_map ();
Nous y voilà! Maintenant, testez votre film "Ctrl + Entrée" ou cliquez sur Contrôle> Tester le film dans le menu…
Oui! Nous avons une carte zoomée sur Brussels Airport! N'est-ce pas génial?! Peut-être pas… Jetons un coup d'œil à ce que nous avons ici. Nous avons la carte et nous pouvons la faire glisser. Il nous faut donc des outils pour naviguer sur la carte, effectuer des zooms avant et arrière sur la carte. Commençons par ces outils de navigation d'abord!
Tout d’abord, importons 3 classes supplémentaires; ajoutez ces lignes sous l'autre code d'importation dans notre script:
import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl;
Non, allez à la fonction onMapReady () et ajoutez ces 3 lignes de code sous les autres lignes:
map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ());
Ici, nous ajoutons les contrôles de type de carte, nous pouvons donc maintenant changer de type de carte. Ensuite, nous ajoutons un contrôle d’aperçu de la carte en bas à droite de notre carte. Et nous ajoutons les outils de navigation de la carte. Ceci est notre code source complet, comme il se doit maintenant:
importer com.google.maps.LatLng; importer com.google.maps.Map; importer com.google.maps.Map3D; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.View; importer com.google.maps.geom.Attitude; import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl; // Variables var map: Map3D; // Appelez la fonction pour créer la carte add_map (); // Fonction qui ajoute la carte sur la fonction de la scène add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nouveau point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (carte); // Fonction qui sera activée une fois la carte créée. Function onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nouvelle attitude (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ());
Allez-y et testez votre film à nouveau. Vous pouvez voir que vous pouvez vous déplacer très facilement sur la carte maintenant avec ces nouveaux
les contrôles!
Je pense qu'il est temps de passer à la partie marqueurs; une carte sans marqueurs, c'est comme un bar sans bière, n'est-ce pas? Pas de truc idiot cette fois! Passons tout de suite aux marqueurs personnalisés!
Nous voulons placer nos marqueurs personnalisés sur la carte avec les informations qui seront stockées dans un fichier XML externe. Commençons par créer un marqueur personnalisé, puis nous créerons le fichier XML et ensuite nous le chargerons dans Flash..
Je ne suis pas un grand designer, alors je pense que vous serez capable de créer un marqueur beaucoup plus cool que le mien! C'est pourquoi je ne vais pas passer trop de temps sur ça. Dessinez quelques cercles, superposez-les, sélectionnez tout, appuyez sur F8, sélectionnez movieClip, nommez-le "marker_mc" et sélectionnez Exporter pour Actionscript. Hit "OK".
Comme je l'ai déjà mentionné, j'espère que vous créerez un marqueur plus cool et plus beau que celui-ci! Il suffit de dessiner votre propre marqueur et
le transformer en un moviclip comme expliqué ci-dessus.
Une fois que vous avez créé le MovieClip, il apparaîtra dans votre bibliothèque. Vous pouvez ensuite le supprimer de la scène car nous allons l'importer à l'aide de
ActionScript (c'est pourquoi vous avez dû sélectionner l'option "Exporter pour ActionScript"). Dans notre bibliothèque, nous avons maintenant 2 éléments; la
GoogleMapsLibrary et notre marker_mc.
OK, nous y sommes. Nous avons une carte et (dans votre cas) un très beau marqueur! Créons maintenant le fichier XML. Ouvrez votre éditeur de code préféré, créez ce fichier et enregistrez-le sous le nom locations.xml..
50.899197766773284 4.486040573103489 Bruxelles 49.004024443647324 2.571113562006575 Paris 51.4699229971675 -0.45367874251784013 Londres
Nous devons intégrer les données XML dans notre film flash. Pour ce faire, nous devons créer une nouvelle fonction qui chargera notre code XML. Ajouter
ce morceau de code au bas du script. Dans notre fonction onMapReady (), nous appelons cette nouvelle fonction load_xml (). Une fois notre carte prête, nous commencerons à charger le fichier XML..
Accentsconagua
// Fonction qui chargera la fonction XML loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = new XML (e.target.data); function load_xml () var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (new URLRequest ("locations.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. À l'intérieur de 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);
Si nous testons notre film maintenant, nous pouvons voir que notre film affiche les données XML. Maintenant travaillons avec.
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;
Vous pouvez supprimer la ligne "trace ()" que nous utilisions auparavant car nous savons que les choses fonctionnent.
Maintenant que toutes nos données XML sont stockées dans des variables, nous pouvons en charger d'autres pour charger nos marqueurs sur la carte. Nous ajoutons d’abord quelques classes supplémentaires à notre code. Ajoutez ce morceau de code sous les autres classes:
importer com.google.maps.overlays. *; importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent;
Créez une nouvelle fonction appelée createMarker (). Nous voulons ajouter cette fonction juste avant notre fonction loadXML ().
// 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;
Nous pouvons appeler la fonction createMarker () pour chaque marqueur à ajouter à la carte. C'est pourquoi, dans notre boucle For, nous ajoutons cette ligne de code:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
Si vous testez le film maintenant, vous constaterez que nous avons des marqueurs sur notre carte aux emplacements spécifiés dans notre fichier xml! C’est génial, mais nous n’avons pas créé ce grand marqueur personnalisé pour rien, nous? Nous allons supprimer ces marqueurs standard et ajouter nos marqueurs personnalisés.
Nous devons d’abord créer notre objet marqueur personnalisé. Ajoutez ce code dans la fonction createMarker (), au-dessus du reste du code:
// Créer un objet marqueur personnalisé var markerPin: marker_mc = new marker_mc (); // Si votre marqueur est trop grand, vous pouvez le réduire ici markerPin.width = 20; markerPin.height = 20;
Ensuite, nous passerons au code suivant où nous devrons ajouter une ligne à markerOptions. Rechercher ce morceau de code:
new MarkerOptions (hasShadow: true, info-bulle: "" + astuce)
et changez le en:
new MarkerOptions (hasShadow: true, icône: this.addChild (markerPin), info-bulle: "" + astuce)
D'accord! Testez votre film et vérifiez le résultat!
OK, quelle est la prochaine? Les fenêtres d'information! Lorsque nous cliquons sur notre marqueur, nous devons obtenir les informations que nous avons ajoutées à notre fichier XML. Avant d'ajouter les fenêtres d'informations, je souhaite simplement supprimer cette ligne jaune laide autour de notre carte. Avez-vous déjà remarqué? Lorsque vous faites une mise au point sur la carte, une ligne jaune l’entoure. Personnellement, je n'aime vraiment pas ça, alors retirons-le. Ajoutez simplement cette ligne de code dans notre section variables:
// Pas de ligne de focus stage.stageFocusRect = false;
Ok c'est fait! Ajoutons des fenêtres d'information. Ajoutez un peu plus de code à notre fonction createMarker ():
i.addEventListener (MapMouseEvent.CLICK, fonction (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nouvelle InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);));
Voici à quoi ressemble notre fonction createMarker ():
function createMarker (latlng: LatLng, number: Number, tip, myTitle, myContent): Marker // crée un objet marqueur personnalisé var markerPin: marker_mc = new marker_mc (); // Si votre marqueur est trop grand, vous pouvez le réduire ici markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (plus tard, new MarkerOptions (hasShadow: true, icône: this.addChild (markerPin), tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, fonction (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nouvelle InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);)); retourne i;
Testez votre film et vous aurez maintenant des fenêtres d'information aussi.
Eh bien c'est ça! Félicitations, vous venez de créer une carte Google Map avec navigation 3D et marqueurs personnalisés! Très bon travail! Nous allons avoir un
dernier regard sur notre code:
importer com.google.maps.LatLng; importer com.google.maps.Map; importer com.google.maps.Map3D; importer com.google.maps.MapEvent; importer com.google.maps.MapType; importer com.google.maps.View; importer com.google.maps.geom.Attitude; import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl; importer com.google.maps.overlays. *; importer com.google.maps.InfoWindowOptions; importer com.google.maps.MapMouseEvent; // Variables var map: Map3D; // Pas de ligne de focus stage.stageFocusRect = false; // Appelez la fonction pour créer la carte add_map (); // Fonction qui ajoute la carte sur la fonction de la scène add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nouveau point (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (carte); // Fonction qui sera activée une fois la carte créée. Function onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nouvelle attitude (20,40,0)); map.addControl (new MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (new NavigationControl ()); // charge le XML load_xml (); // Ajouter des marqueurs sur la fonction Map createMarker (plus tard: LatLng, nombre: astuce, monTitre, monContenu): Marker // créer un objet marqueur personnalisé var markerPin: marker_mc = new marker_mc (); // Si votre marqueur est trop grand, vous pouvez le réduire ici markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (plus tard, new MarkerOptions (hasShadow: true, icône: this.addChild (markerPin), tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, fonction (event: MapMouseEvent): void map.openInfoWindow (event.latLng, nouvelle InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent);)); retourne i; // Fonction qui chargera la fonction XML 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)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); Vous pouvez utiliser cette carte 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!
