Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial werd voor het eerst gepubliceerd in mei 2009.
In deze zelfstudie zullen we zien hoe we een kaart in Flash kunnen maken met behulp van de Google Map API. We bespreken een aantal basisprincipes, zoals inzoomen op de kaart en het toevoegen van een aantal bedieningselementen. We zullen ook kijken naar hoe we markers aan onze kaart kunnen toevoegen en hoe we gegevens kunnen laden met behulp van een XML-bestand.
Voordat we onze kaart in Flash kunnen maken, moeten we een paar dingen instellen. Als u de Google Map API wilt gebruiken, hebt u een persoonlijke API-sleutel nodig. Ga hiervoor naar http://code.google.com/intl/nl/apis/maps/documentation/flash/ en klik op de link aan de rechterkant van de pagina 'Aanmelden voor een Google Maps API-sleutel'.
Als u op de koppeling "Aanmelden voor een Google Maps API Key" klikt, komen we op de volgende pagina waar we onze persoonlijke API Key kunnen genereren. Scroll naar beneden op de pagina, ga akkoord met de algemene voorwaarden (je zou deze ook kunnen lezen als je echt geïnteresseerd bent) en voeg de url toe van de website waar je de applicatie wilt gebruiken (je hebt een andere API-sleutel nodig voor elk domein waar je wilt een kaart plaatsen). Klik daarna op "API-sleutel genereren".
Nu ziet u uw persoonlijke API-sleutel voor het geselecteerde domein. Kopieer de API-sleutel en plak of sla het ergens op, want we hebben het binnenkort nodig.
Ok, nu hebben we onze API-sleutel, maar we hebben nog steeds één ding nodig voordat we onze kaart in Flash kunnen maken. We moeten de Google Map-SWC-component downloaden. Ga hiervoor naar http://code.google.com/intl/nl/apis/maps/documentation/flash/ en klik op "Download de Google Maps API voor Flash SDK". Er verschijnt een pop-upvenster, kies ervoor om het bestand "sdk.zip" op te slaan en het te downloaden.
Nu moeten we de SDK-component installeren om deze in Flash te gebruiken. Ga hiervoor naar de locatie waar u de Google Maps API voor Flash SDK hebt opgeslagen en zoek de niet-flexibele versie van de interfacebibliotheek. In mijn geval is dit (lib / map_1_9.swc). Kopieer nu het bestand "map_1_9.swc".
Nadien, als je Flash momenteel hebt geopend, stop je de applicatie en zoek je naar deze map:
Maak in die map een nieuwe map met de naam 'google' en plak het bestand 'map_1_9.swc' erin. Flash is nu ingesteld om de Google Maps API voor Flash te ondersteunen.
OK. Dat is allemaal gedaan en afgestoft! Nu kunnen we eindelijk beginnen met het maken van onze kaart in Flash. Start Flash CS3 of CS4 en maak een nieuw ActionScript 3.0-bestand, standaard stadiumgrootte (550 x 400).
Sla nu eenvoudig het bestand op; druk op "Ctrl + S" of ga naar Bestand> Opslaan in het menu. Bewaar het op de gewenste locatie en noem het wat je maar wilt. Ik noem het "google_map".
Open het paneel Componenten "Ctrl + F7" of klik op Venster> Componenten in het menu en sleep de GoogleMapsLibrary naar het werkgebied.
Maak een nieuwe laag, dubbelklik op de naam en hernoem hem in "acties".
Nu met de geselecteerde acties laag opent u het actiescherm door op "F9" te klikken of op Venster> Acties te klikken. Voeg deze regels toe:
import com.google.maps.LatLng; importeer com.google.maps.Map; importeer com.google.maps.MapEvent; importeer com.google.maps.MapType;
Laten we nu de kaart toevoegen! Wanneer we de film laden, zal dit stukje code een kaart maken en deze op het podium instellen. Binnen de code zien we de variabele "map.key"; hier moeten we onze persoonlijke API Key toevoegen. Open het bestand waar u de API-sleutel hebt opgeslagen en kopieer / plak deze in de variabele.
// Maak de Map var-kaart: Map = nieuwe kaart (); map.key = "Uw API-sleutel hier"; map.setSize (nieuw punt (stage.stageWidth, stage.stageHeight)); this.addChild (kaart);
OK, ga nu en test uw film "Ctrl + Enter" of klik op Besturing> Film testen in het menu en u zult zien dat u zojuist een kaart hebt gemaakt.
In dit stadium kunnen we de kaart alleen maar slepen. Dat is niet echt wat we zoeken, dus laten we wat besturingselementen toevoegen aan de kaart waarmee we kunnen zoomen en bewegen. Om besturingselementen aan onze kaart toe te voegen, moeten we onze code bijwerken. Eerst moeten we een paar extra lessen bellen:
import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl;
Daarna moeten we een nieuwe functie maken om te bellen zodra de kaart is gemaakt. We noemen die functie "onMapReady ()". Binnen deze functie voegen we onze bedieningselementen toe aan de kaart.
function onMapReady (event: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (nieuwe PositionControl ()); map.addControl (nieuwe MapTypeControl ());
Nu moeten we gewoon de "onMapReady ()" -functie aanroepen wanneer onze kaart is geladen. Om dat te doen, moeten we een extra regel toevoegen aan ons eerste stuk code.
map.addEventListener (MapEvent.MAP_READY, onMapReady);
Onze volledige code ziet er nu als volgt uit:
import com.google.maps.LatLng; importeer com.google.maps.Map; importeer com.google.maps.MapEvent; importeer com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; // Maak de Map var-kaart: Map = nieuwe kaart (); map.key = "Uw API-sleutel hier"; map.setSize (nieuw punt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kaart); function onMapReady (event: MapEvent): void map.addControl (new ZoomControl ()); map.addControl (nieuwe PositionControl ()); map.addControl (nieuwe MapTypeControl ());
Test nu uw film "Ctrl + Enter" of klik op Besturing> Film testen in het menu en u zult zien dat onze kaart nu besturingselementen bevat. We kunnen inzoomen en zelfs onze kaart wijzigen in Satelliet-, Hybride en Terreinweergave. Dat is erg cool, maar we willen meer?
Laten we inzoomen op een specifieke locatie zodra onze kaart voor de eerste keer wordt geladen. Stel, ik ben een surfer en ik wil een kaart maken met de surfplekken in mijn woonplaats. We willen niet dat mensen handmatig moeten inzoomen en naar het gebied moeten zoeken, dus dat regelen we in een oogwenk. Het enige dat we moeten toevoegen is een kleine coderegel naar onze "onMapReady ()" -functie.
map.setCenter (nieuwe LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE);
Wat we hier eigenlijk doen is een nieuw LatLng-punt maken op de kaart. Eerst specificeren we 2 waarden: de "breedtegraad" en de "lengtegraad" van onze regio. Vervolgens stellen we onze zoomwaarde in; Ik heb ervoor gekozen om 9. te gebruiken. De zoomfactor varieert van 0 tot ongeveer 16 (dit kan variëren van regio tot regio). Ten slotte hebben we het kaarttype ingesteld; Ik heb hier voor de HYBRID_MAP_TYPE gekozen.
Onze "onMapReady ()" -functie ziet er nu als volgt uit:
function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nieuwe ZoomControl ()); map.addControl (nieuwe PositionControl ()); map.addControl (nieuwe MapTypeControl ());
Als we onze film testen, kun je zien dat er veel dingen zijn veranderd. Zodra de kaart is geladen, zoomen we in op onze specifieke regio en is ons kaarttype nu Hybride. Als u de breedtegraad en lengtegraad voor uw regio wilt bepalen, kunt u Google Earth of een online tool gebruiken, zoals http://itouchmap.com/latlong.html.
Laten we nu een eenvoudige markering aan onze kaart toevoegen. Voeg gewoon nog 2 klassen toe:
import com.google.maps.overlays.MarkerOptions; importeer com.google.maps.overlays.Marker;
en werk de functie "onMapReady ()" bij met dit codefragment:
var marker: Marker = new Marker (nieuwe LatLng (28.74659, -13.93447)); map.addOverlay (marker);
We maken opnieuw een LatLng-punt met een aantal specifieke waarden voor lengte- en lengtegraad voor onze locatie. Vervolgens noemen we de "addOverlay ()" om onze marker op de kaart te zetten. Onze volledige code ziet er nu als volgt uit:
import com.google.maps.LatLng; importeer com.google.maps.Map; importeer com.google.maps.MapEvent; importeer com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.overlays.MarkerOptions; importeer com.google.maps.overlays.Marker; // Maak de Map var-kaart: Map = nieuwe kaart (); map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw"; map.setSize (nieuw punt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kaart); function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nieuwe ZoomControl ()); map.addControl (nieuwe PositionControl ()); map.addControl (nieuwe MapTypeControl ()); var marker: Marker = new Marker (nieuwe LatLng (28.74659, -13.93447)); map.addOverlay (marker);
Ga en test je film. Je ziet onze marker op de kaart.
Laten we nu alles naar een hoger niveau tillen. We hebben een kaart met zoomknoppen en een markering. Wat hebben we nog meer nodig? Nou ik zal het je vertellen. We hebben MEER MARKERS, TOOLTIPS, INFO WINDOWS en we willen alles laden van een XML-bestand. Dus laten we beginnen. Eerst maken we ons XML-bestand. Open uw favoriete XML-editor en maak dit bestand aan:
28,74659 -13,93447 Majanicho 28.738764 -13.955126 Derecha de los Alemanes 28.741022 -13.951821 De Bubbel
Zodra onze kaart is geladen, moeten we de XML-gegevens in ons Flash-bestand opnemen. Maak een nieuwe functie met de naam "xmlLoader ()" en we zullen die functie in onze "onMapReady ()" -functie noemen. Eerst moeten we de code die we hebben toegevoegd om onze marker te maken, slechts een paar stappen eerder verwijderen. Vervolgens voegen we de regel toe om de functie "xmlLoader ()" te gebruiken. Onze "onMapReady ()" -functie zou er nu als volgt uit moeten zien:
function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nieuwe ZoomControl ()); map.addControl (nieuwe PositionControl ()); map.addControl (nieuwe MapTypeControl ()); xmlLoader ();
Vervolgens willen we de "xmlLoader ()" -functie maken.
function xmlLoader ()
In de volgende stap vullen we het in.
Ok, hier zijn we. Laten we onze XML-gegevens laden. Binnen de "xmlLoader ()" -functie voegen we deze code toe:
Accentsconagua
functie loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = nieuwe XML (e.target.data); // end of loadXML-functie var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (nieuwe URLRequest ("xml.xml")); Hiermee krijgen we onze XML-gegevens om mee te werken.
Omdat we 3 locaties in ons XML-bestand hebben, moeten we een 'For'-lus maken en alle gegevens in sommige arrays opslaan. Binnen onze "loadXML ()" -functie voegen we dit stuk code toe om de For-lus te maken:
for (var i: Number = 0; i < map_xml.location.length(); i++) trace(map_xml.location[i].title_tip); // end of for loop
Om te testen of de dingen voor ons werken, traceren we de variabele "title_tip". Test je film en je zou de volgende uitvoer moeten krijgen:
Vervolgens moeten we een aantal variabelen maken om onze gegevens in het XML-bestand op te slaan. In onze For-lus voegen we deze variabelen toe:
var latng: 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;
Als u wilt, kunt u de regel "trace ()" verwijderen die we eerder hebben gebruikt. Onze For-lus ziet er nu als volgt uit:
for (var i: Number = 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
OK! We moeten een markering toevoegen aan de kaart voor elk van onze drie locaties. Nu we alle gegevens in onze variabelen hebben opgeslagen, moeten we een nieuwe functie maken met de naam "createMarker ()". Binnen onze "loadXML ()" -functie voegen we deze nieuwe functie toe:
// Markeringen toevoegen aan de map createMarker (latlng: LatLng, nummer: Number, tip, myTitle, myContent): Marker var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, tooltip: "" + tip)); terugkeer i; // eindfunctie createMarker
We moeten deze functie "createMarker ()" nog steeds gebruiken om onze markeringen op de kaart te zien. Om dat te doen, moeten we aan het einde van onze For-lus een extra coderegel toevoegen:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
Dit is wat onze "loadXML ()" -functie er nu zou moeten uitzien:
functie loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = nieuwe XML (e.target.data); for (var i: Number = 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
Test je film en je ziet de markeringen op de kaart! Merk op dat onze 3 punten erg dicht bij elkaar liggen, dus misschien wil je een beetje inzoomen om ze duidelijker te zien.
Eindelijk moeten we wat infovensters toevoegen. Als we op de markeringen klikken, krijgen we informatie over hun locaties. Om dit te doen, moeten we nog 2 klassen toevoegen:
import com.google.maps.InfoWindowOptions; importeer com.google.maps.MapMouseEvent;
? een beetje meer code voor onze "createMarker ()" -functie?
i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent)););
Test nu je film en je ziet dat onze markeringen nu kunnen worden aangeklikt en dat ze een informatievenster met tekst uit het XML-bestand maken.
Dat is het! Bekijk onze definitieve code:
import com.google.maps.LatLng; importeer com.google.maps.Map; importeer com.google.maps.MapEvent; importeer com.google.maps.MapType; import com.google.maps.controls.ZoomControl; import com.google.maps.controls.PositionControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.overlays.MarkerOptions; importeer com.google.maps.overlays.Marker; import com.google.maps.InfoWindowOptions; importeer com.google.maps.MapMouseEvent; // Maak de Map var-kaart: Map = nieuwe kaart (); map.key = "Uw API-sleutel hier"; map.setSize (nieuw punt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kaart); function onMapReady (event: MapEvent): void map.setCenter (new LatLng (28.74659, -13.93447), 9, MapType.HYBRID_MAP_TYPE); map.addControl (nieuwe ZoomControl ()); map.addControl (nieuwe PositionControl ()); map.addControl (nieuwe MapTypeControl ()); xmlLoader (); function xmlLoader () function loadXML (e: Event): void XML.ignoreWhitespace = true; var map_xml: XML = nieuwe XML (e.target.data); for (var i: Number = 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")); Test uw film Ctrl + Enter om de uitkomst te controleren. Je hebt je eigen XML-gebaseerde Flash-kaart! U kunt het gebruiken op uw website, de locaties bewerken zoals u wilt, het is aan u. Ga je gang en experimenteer, als je coole resultaten hebt, deel deze dan met ons.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
