• 
• 
• 
• 
• 
• 
• 
• 0

März 2010

Flash und Geodaten

Fortsetzung, Teil 2

Ich hier – du da

(Link zum Artikel: http://www.createordie.de/cod/artikel/2931)

Der Quellcode steht auch als Download bereit.

Anschließend kann man bequem dem MapEvent.MAP_READY lauschen, der nach erfolgreicher Initialisierung die Kartenvoransicht auf die Breiten- und Längengrade der Region einstellt, die man per default sehen möchten (in meinem Fall Düsseldorf).

Neben netten kleinen Annehmlichkeiten wie dem Draggen der Karte per Mouse, Zoomen in die Karte per Mousewheel oder einfaches Switchen der Geländetypen via Drop-Down darf bei so einer Karte natürlich nicht fehlen, eine Suchfunktion ebenso wenig. Ein Suchfeld hatte ich in meinem kleinen "designpreisverdächtigen" GUI bereits angelegt. Nun ist es Zeit, das Ganze mit Leben zu füllen.

Die Funktion initSearch übergibt in unserem Fall den gesuchten Ort an den geocoder. Dieser verwertet den eingegebenen String und liefert im Anschluss daran bestenfalls als Ergebnis die neu gefundene Kartenposition und platziert auf Wunsch eine kleinen Marker (new Marker()), den man darüber hinaus noch individuell gestalten kann (Listing 2).

1. ///////////////////////////////////
2. // start searching...
3. ///////////////////////////////////
5. private function initSearch( event:MouseEvent ):void {
7. if ( this.searchNode.text == "" || this.searchNode.text == " " ) {
9. //kein suchbegriff wurde definiert...
11. } else {
13. geocoder.geocode(String(this.searchNode.text));
14. geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, onGeocodingSuccess );
16. }
19. }
21. private function onGeocodingSuccess( event:GeocodingEvent ):void {
23. this.geoDataPool = event.response.placemarks;
25. if ( this.geoDataPool.length > 0 ) {
27. this.map.setCenter( this.geoDataPool[0].point, zoomFactor );
29. this.marker = new Marker( this.geoDataPool[0].point, new MarkerOptions( { icon: this.markerCanvas, hasShadow:true } ) );
31. this.map.addOverlay( this.marker );
33. this.marker.addEventListener( MapMouseEvent.ROLL_OVER, onMarkerRollOver );
34. this.marker.addEventListener( MapMouseEvent.ROLL_OUT, onMarkerRollOut );
36. }
38. }
40. private function onMarkerRollOver( event:MapMouseEvent ):void {
42. //var pnt_:Point = this.map.fromLatLngToPoint( new LatLng( 52.32, 13.25 ) );
44. //FlashConnect.trace( String(pnt_.x) );
45. var pnt:Point = this.map.fromLatLngToViewport( this.geoDataPool[0].point );
47. this.infoNode["adressTxt"].text = this.geoDataPool[0].address.split(",").join("\n");
49. this.infoNode.x = pnt.x + 15;
50. this.infoNode.y = pnt.y - 70;
51. this.infoNode.visible = true;
53. Tweener.addTween( this.infoNode, { alpha:1, time:.4, transition:"easeOutSine" } );
56. }
58. private function onMarkerRollOut( event:MapMouseEvent ):void {
60. Tweener.addTween( this.infoNode, { alpha:0, time:.4, transition:"easeOutSine", onComplete:hideInfo } );
63. }
65. private function hideInfo():void {
67. this.infoNode.visible = false;
69. }

Der Quellcode steht auch als Download bereit.

• 1
• 2
• 3
• 4

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• flash,
• frank reitberger,
• geodaten,
• google maps api,
• lbs