Google Maps 3D Perspective View

Seit einigen Tagen ist es möglich, mit der Google Maps API for Flash auch Karten mit einer 3D-Ansicht anzuzeigen.

The Google Maps API for Flash now contains support for three-dimensional (3D) maps. 3D maps using the Maps API for Flash are shown using a realistic perspective much like that used within Google Earth.

Die Karten funktionieren sowohl mit Flash Player 9 als auch 10, sollen aber mit dem neueren Flash Player schneller gerendert werden.

Generelle Informationen und Näheres zur Maps-API gibt's im Tutorial Einführung in Google Maps for Flash/Flex. Im Folgenden eine kurze Beschreibung, was hinter den neuen 3D-Karten verbirgt.

Demo

Die Google Maps 3D Demo benötigt den Flash Player 10

Map mit Map3D ersetzen

Anstatt des bisherigen Map-Objekt wird für Karten mit Perspektive ein Objekt der Klasse com.google.maps.Map3D eingesetzt.

Blickwinkel

roll-yaw-pitchDer Blickwinkel wird über drei Eigenschaften festgelegt: yaw, roll und pitch.

yaw ist die Blickrichtung in den Norden. 0 entspricht dabei Norden. Bei 180 Grad würde z.B die Karte auf dem Kopf stehen, d.h. nach Süden ausgerichtet sein.

pitch ist verantwortlich, ob man wie bisher einfach direkt von oben auf die Karte schaut (Wert 0) oder einen schrägen Blickwinkel hat.

roll ist die Ausrichtung zum Boden (also ob die Kamera waagrecht zum Boden ist oder geneigt).

Code

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.  :Map3D xmlns:maps="com.google.maps.*" mapevent_mappreinitialize="onMapPreinitialize(event)" id="map"
  4.         width="100%" height="100%"
  5.         key="abc"
  6.         mapevent_mapready="onMapReady(event)"
  7.         />
  8. :Script>
  9.  
  10.     import com.google.maps.controls.*;
  11.     import com.google.maps.*;
  12.     import com.google.maps.geom.*;
  13.  
  14.   private function onMapPreinitialize(event:MapEvent):void {
  15.     var myMapOptions:MapOptions = new MapOptions();
  16.     myMapOptions.zoom = 12;
  17.     myMapOptions.center = new LatLng(40.756054, -73.986951);
  18.     myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;
  19.     myMapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;
  20.     myMapOptions.attitude = new Attitude(0,70,0);
  21.     map.setInitOptions(myMapOptions);
  22.  
  23.   }
  24.  
  25.  private function onMapReady(event:MapEvent):void {
  26.   map.addControl(new MapTypeControl());
  27.   map.addControl(new NavigationControl());
  28.  } 
  29.  
  30.   ]]>
  31. :Script>
  32. :Application>

Hinweis: Man muss den eigenen Google Maps API Key einsetzen.

Link: Google Maps API for Flash - 3D Maps