Share
Na zo'n positieve reactie op mijn eerste zelfstudie Een kaart implementeren met de Google Map API voor Flash, besloot ik een tweede te schrijven. Sinds die eerste tut is de Google Map API bijgewerkt, waardoor ontwikkelaars (onder andere) 3D-weergave aan kaarten kunnen toevoegen. Dit is een geweldige functie en tijdens deze tutorial zal ik uitleggen hoe het te gebruiken.
Ook vroegen veel mensen om uitleg over het toevoegen van aangepaste markeringen; dat is het tweede dat we hier vandaag zullen bespreken.
Ik ga niet verder bouwen op onze vorige kaart omdat we de nieuwe Google Map Component moeten downloaden. Er is geen manier om het onderdeel uit mijn vorige zelfstudie te gebruiken omdat deze de 3D-functies niet ondersteunt. Dus ... ga naar http://code.google.com/intl/nl/apis/maps/documentation/flash/
We moeten de SDK-component installeren om deze in Flash te gebruiken. Ga hiervoor naar de locatie waar u het SDK-onderdeel van Google Maps heeft opgeslagen en zoek de niet-flexibele versie van de interfacebibliotheek. In mijn geval is dit (lib / map_1_18.swc). Kopieer nu het bestand "map_1_18.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_18.swc' erin. Flash is nu ingesteld op
ondersteuning van de Google Maps API voor Flash.
Ok we hebben het onderdeel nu, maar voordat we aan de slag kunnen, hebben we nog steeds een Google Map API Key nodig om onze kaart online te laten werken. Een Google Map API-sleutel is gratis en u kunt er hier een downloaden:
http://code.google.com/intl/nl/apis/maps/documentation/flash/
.
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, het saaie werk is gedaan, nu kunnen we beginnen met de leuke dingen! Laten we een duik nemen in Flash en een nieuw ActionScript 3.0-bestand maken, standaard stadiumgrootte (550 x 400).
Ik begin het liefst met het opslaan van het bestand. Terwijl ik werk, vind ik het heel leuk om altijd op "Ctrl + S" te drukken, dus ga je gang
"Ctrl + S" of klik op "Bestand> Opslaan" in het menu. Bewaar het op de gewenste locatie en noem het wat je maar wilt. Ik zal het noemen
"Google_map".
Open het paneel Componenten "Ctrl + F7" of klik op Venster> Componenten in het menu. Sleep de GoogleMapsLibrary naar uw bibliotheek.
Om georganiseerd te blijven, hernoem ik de eerste laag naar "acties".
Open, met de geselecteerde actieslaag, het actiescherm (druk op "F9" of klik op "Venster> Acties") en voeg deze regels code toe:
import com.google.maps.LatLng; importeer com.google.maps.Map; importeer com.google.maps.Map3D; importeer com.google.maps.MapEvent; importeer com.google.maps.MapType; import com.google.maps.View; import com.google.maps.geom.Attitude;
Nu zullen we onze eerste functie creëren. Eerst willen we onze Map-variabele declareren:
// Variabele var-kaart: Map3D;
Nu kunnen we onze functie toevoegen die we zullen bellen om de hoofdkaart op het podium toe te voegen:
// Functie die de kaart toevoegt aan de stagefunctie add_map () map = new Map3D (); map.key = "YOUR_API_KEY_HERE"; map.setSize (nieuw punt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kaart);
OK, zoals je kunt zien hebben we een eventlistener toegevoegd die vuurt zodra onze kaart is geladen, dus laten we ook die functie aanmaken:
// Functie die wordt geactiveerd zodra map is gemaakt function onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.setAttitude (nieuwe Attitude (20,30,0));
Hier hebben we de kaart in het midden geplaatst. Deze functie heeft 3 waarden en bepaalt de locatie waar de kaart wordt geopend. De
waarden zijn als volgt "map.setCenter (new LatLng (breedtegraad, Lengtegraad), zoom); ". Vervolgens definiëren we de weergavemodus;
terwijl we de nieuwe 3D-kaart gebruiken, zal ik de weergave Perspectief gebruiken. Als u van een normale kaartweergave houdt, kunt u deze waarde wijzigen in
"View.VIEWMODE_2D".
Daarna stellen we de houding in. Dit bepaalt hoe we de kaart bekijken. In dit geval voegen we er een beetje Perspectief aan toe en
verander de kaart een beetje om een mooiere kijkhoek te creëren. Je kunt een beetje met deze waarden spelen en zien wat je het leukst vindt.
OK, het is tijd voor een eerste controle! Wat hebben we tot nu toe? Nou, nog niets! We moeten eerst onze functie bellen om het te maken
kaart! Laten we deze regel code net onder onze variabelen toevoegen:
// Variabele var-kaart: Map3D; // Roep de functie aan om de map add_map () te maken;
Daar gaan we! Test nu gewoon uw film "Ctrl + Enter" of klik op Besturing> Film testen in het menu ...
Ja! We hebben een kaart ingezoomd op Brussels Airport! Is dat niet geweldig ?! Misschien niet ... Laten we eens kijken naar wat we hier hebben. We hebben de kaart en we kunnen de kaart slepen. Wat we vervolgens nodig hebben, zijn hulpmiddelen om op de kaart te navigeren, op de kaart in en uit te zoomen. Laten we eerst beginnen met die navigatiehulpmiddelen!
Laten we eerst 3 extra klassen importeren; voeg deze regels toe onder de andere importcode in ons script:
import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl;
Ga niet naar de functie onMapReady () en voeg deze 3 regels code toe onder de andere regels:
map.addControl (nieuwe MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (nieuwe NavigationControl ());
Hier voegen we de besturingselementen voor het kaarttype toe, dus nu kunnen we het kaarttype wijzigen. Vervolgens voegen we onderaan de kaart een kaartoverzichtscontrole toe. En we voegen de navigatiehulpmiddelen voor kaarten toe. Dit is onze volledige broncode zoals die er nu zou moeten uitzien:
import com.google.maps.LatLng; importeer com.google.maps.Map; importeer com.google.maps.Map3D; importeer com.google.maps.MapEvent; importeer com.google.maps.MapType; import com.google.maps.View; import com.google.maps.geom.Attitude; import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl; // Variabele var-kaart: Map3D; // Roep de functie aan om de map add_map () te maken; // Functie die de kaart toevoegt aan de stagefunctie add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nieuw punt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kaart); // Functie die wordt geactiveerd zodra map is gemaakt function onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nieuwe Attitude (20,40,0)); map.addControl (nieuwe MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (nieuwe NavigationControl ());
Ga je gang en test je film opnieuw. Je kunt zien dat je nu heel gemakkelijk over de kaart kunt bewegen met deze funky ogende nieuwe
controls!
Ik denk dat het tijd is om verder te gaan naar het markers gedeelte; een kaart zonder markeringen is als een bar zonder bier is het niet? Geen gekke dingen deze keer! Laten we meteen naar de aangepaste markeringen gaan!
We willen onze aangepaste markeringen op de kaart plaatsen met informatie die wordt opgeslagen in een extern XML-bestand. Laten we beginnen met het maken van een aangepaste markering. Vervolgens maken we het XML-bestand en daarna laden we het in Flash.
Ik ben niet zo'n ontwerper, dus ik denk dat je een veel coolere marker kunt maken dan ik! Daarom ga ik hier niet te veel tijd aan besteden. Teken gewoon een paar cirkels, leg ze op elkaar, selecteer alles, druk op F8, selecteer movieClip, noem het "marker_mc" en selecteer Export For Actionscript. Druk op "OK".
Zoals ik al eerder zei, ik hoop dat je een leukere en mooiere marker zult maken dan dit! Teken gewoon je eigen marker en
covert het op een moviclip zoals hierboven uitgelegd.
Nadat u de filmclip hebt gemaakt, wordt deze in uw bibliotheek weergegeven. U kunt het vervolgens uit het werkgebied verwijderen, want we importeren het met
ActionScript (daarom moest u de optie "Exporteren voor ActionScript") selecteren. In onze bibliotheek hebben we nu 2 items; de
GoogleMapsLibrary en onze marker_mc.
OK, hier zijn we. We hebben een kaart en (in jouw geval) een heel goed uitziende marker! Laten we nu het XML-bestand maken. Open uw favoriete codebewerker, maak dit bestand aan en sla het op als locations.xml.
50,899197766773284 4,486040573103489 Brussel 49,004024443647324 2,571113562006575 Parijs 51,4699229971675 -,45367874251784013 Londen
We moeten de XML-gegevens in onze Flash-film opnemen. Om dit te doen, moeten we een nieuwe functie maken die onze XML laadt. Toevoegen
dit stukje code naar de onderkant van het script. In onze onMapReady () -functie noemen we deze nieuwe functie load_xml (). Zodra onze kaart klaar is, beginnen we met het laden van de xml.
Accentsconagua
// Functie die de xml-functie loadXML (e: Event) laadt: void XML.ignoreWhitespace = true; var map_xml: XML = nieuwe XML (e.target.data); function load_xml () var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, loadXML); xmlLoader.load (nieuwe URLRequest ("locations.xml")); Omdat we 3 locaties in ons XML-bestand hebben, moeten we een 'For'-lus maken en alle gegevens in sommige arrays opslaan. In onze
loadXML () -functie we voegen 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);
Als we onze film nu testen, kunnen we zien dat onze film de xml-gegevens uitvoert. Laten we er nu mee werken.
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;
U kunt de regel 'trace ()' verwijderen die we eerder hebben gebruikt, omdat we weten dat de dingen werken.
Nu we al onze xml-gegevens in variabelen hebben opgeslagen, kunnen we eroverheen komen om onze markeringen op de kaart te laden. Eerst voegen we wat extra klassen toe aan onze code. Voeg dit stuk code toe onder de andere klassen:
import com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions; importeer com.google.maps.MapMouseEvent;
Maak een nieuwe functie met de naam createMarker (). We willen deze functie toevoegen vlak voor onze loadXML () -functie.
// 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;
We kunnen de createMarker () -functie bellen voor elke markering die we aan de kaart moeten toevoegen, dus binnen onze For Loop voegen we deze regel toe:
map.addOverlay (createMarker (latlng, i, tip, myTitle, myContent));
Als je de film nu test, kun je zien dat er markeringen op onze kaart staan op de locaties die we in ons xml-bestand hebben opgegeven! Dat is geweldig, maar we hebben die geweldige maatmarkering niet voor niets gemaakt of niet? We zullen die standaardmarkeringen verwijderen en onze aangepaste markeringen toevoegen.
Eerst moeten we ons aangepaste markeringsobject maken. Voeg deze code toe aan de createMarker () -functie, boven de rest van de code:
// maak Aangepast marker-object var markerPin: marker_mc = new marker_mc (); // Als uw marker te groot is, kunt u deze hier schalen; markerPin.width = 20; markerPin.height = 20;
Daarna gaan we naar het volgende stukje code waar we een lijn moeten toevoegen aan de markerOptions. Zoek naar dit stukje code:
nieuwe MarkerOptions (hasShadow: true, tooltip: "" + tip)
en verander het in:
nieuwe MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), tooltip: "" + tip)
OK! Test uw film en controleer het resultaat!
Oké, wat is de volgende stap? De infovensters! Wanneer we op onze markering klikken, moeten we de informatie krijgen die we hebben toegevoegd aan ons XML-bestand. Voordat we de informatievensters toevoegen, wil ik die lelijke gele lijn op onze kaart verwijderen. Hebt u dat al opgemerkt? Wanneer u zich op de kaart concentreert, wordt er een gele lijn omheen weergegeven. Persoonlijk vind ik dat echt niet leuk, dus laten we het verwijderen. Voeg deze regel code gewoon toe onder ons gedeelte variabelen:
// Geen focuslijn stage.stageFocusRect = false;
Ok dat is klaar! Laten we Info-vensters toevoegen. Voeg een beetje meer code toe aan onze createMarker () functie:
i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent)););
Dit is hoe onze createMarker () -functie er nu uitziet:
function createMarker (latlng: LatLng, nummer: Number, tip, myTitle, myContent): Marker // create Aangepast markeringsobject var markerPin: marker_mc = new marker_mc (); // Als uw marker te groot is, kunt u deze hier schalen; markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));); terugkeer i;
Test je film en je hebt nu ook info-vensters.
Nou, dat is het dan! Gefeliciteerd, u heeft zojuist een Google Map met 3D-navigatie en aangepaste markeringen gemaakt! Heel goed werk! Laat ons een
laatste blik op onze code:
import com.google.maps.LatLng; importeer com.google.maps.Map; importeer com.google.maps.Map3D; importeer com.google.maps.MapEvent; importeer com.google.maps.MapType; import com.google.maps.View; import com.google.maps.geom.Attitude; import com.google.maps.controls.NavigationControl; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.OverviewMapControl; import com.google.maps.overlays. *; import com.google.maps.InfoWindowOptions; importeer com.google.maps.MapMouseEvent; // Variabele var-kaart: Map3D; // Geen focuslijn stage.stageFocusRect = false; // Roep de functie aan om de map add_map () te maken; // Functie die de kaart toevoegt aan de stagefunctie add_map () map = new Map3D (); map.key = 'YOUR_API_KEY_HERE'; map.setSize (nieuw punt (stage.stageWidth, stage.stageHeight)); map.addEventListener (MapEvent.MAP_READY, onMapReady); this.addChild (kaart); // Functie die wordt geactiveerd zodra map is gemaakt function onMapReady (event: MapEvent): void map.setCenter (new LatLng (50.899197766773284, 4.486040573103489), 13); map.viewMode = View.VIEWMODE_PERSPECTIVE; map.setAttitude (nieuwe Attitude (20,40,0)); map.addControl (nieuwe MapTypeControl ()); map.addControl (new OverviewMapControl ()); map.addControl (nieuwe NavigationControl ()); // Laad de xml load_xml (); // Markeringen toevoegen op de kaart createMarker (latlng: LatLng, number: Number, tip, myTitle, myContent): Marker // create Custom marker object var markerPin: marker_mc = new marker_mc (); // Als uw marker te groot is, kunt u deze hier schalen; markerPin.width = 20; markerPin.height = 20; var i: Marker = new Marker (latlng, new MarkerOptions (hasShadow: true, icon: this.addChild (markerPin), tooltip: "" + tip)); i.addEventListener (MapMouseEvent.CLICK, function (event: MapMouseEvent): void map.openInfoWindow (event.latLng, new InfoWindowOptions (titleHTML: "" + myTitle, contentHTML: "" + myContent));); terugkeer i; // Functie die de xml-functie loadXML (e: Event) laadt: 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)); function load_xml() var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadXML); xmlLoader.load(new URLRequest("locations.xml")); U kunt deze kaart 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!
