Google Maps API for Flash で作った地図にマーカーを追加した。
移動・拡大縮小ナビゲーションコントロール デザインを Javascript API と同じにした。
// set Navigation - zoom map.addControl(new ZoomControl()); // set Navigation - position map.addControl(new PositionControl()); |
Flash API 専用。
// set Navigation Control -- zoom / move map.addControl(new NavigationControl()); |
Flash API 専用だと new NavigationControl()
だけで「移動・拡大縮小」コントロールを追加できる。
マーカーはシェープで描画されているらしく、頭の大きさ・色・線の太さ・線の色・透明度など JavaScript API ではできないことも設定できる。
マーカーのドラッグ設定は MarkerOptions
の設定で draggable: true
にするだけ、カンタン!
バウンド・アニメーションの設定は gravity
プロパティにNumber(0~1)で設定する、これもカンタン!
ドラッグ移動地点の緯度経度はイベントリスナーハンドラのイベント引数に LatLng
インスタンスとしてセットされているので toString()
して取出す、JavaScript API と同じ。
地図のフェードインは HydroTween.go で実装した。
import com.google.maps.LatLng; import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.MapType; import com.google.maps.Color; import com.google.maps.MapMouseEvent; import com.google.maps.controls.*; import com.google.maps.styles.*; import com.google.maps.overlays.*; import com.hydrotik.go.*; HydroTween.VERBOSE = false; // start create map var map:Map = new Map(); // set Google Map API key map.key = "YOUR KEY"; // Map size map.setSize(new Point(stage.stageWidth, stage.stageHeight - 30)); // Map position map.y = 30; // hyde map map.alpha = 0; // set MAP_READY handler map.addEventListener(MapEvent.MAP_READY, onMapReady); // set language -- defalut is English map.language = "ja"; // set Maptype Control map.addControl(new MapTypeControl()); // set Navigation Control -- zoom / move //map.addControl(new NavigationControl()); // set Navigation - zoom map.addControl(new ZoomControl()); // set Navigation - position map.addControl(new PositionControl()); // Overview Control style var cpOption:Object = { controlStyle:{ bevelStyle: BevelStyle.BEVEL_NONE, strokeStyle: {color: Color.GRAY10,alpha: 1.0,thickness: 1.0} } ,padding:{x:0,y:0} ,position: new ControlPosition(ControlPosition.ANCHOR_BOTTOM_RIGHT) ,size: {x: 100*stage.stageWidth/stage.stageHeight,y: 100} }; // set Overview Control map.addControl(new OverviewMapControl(new OverviewMapControlOptions(cpOption))); // display this.addChild(map); // method of MAP_READY handler function onMapReady(event:Event):void { // Lat_Lng var latLng:LatLng = new LatLng(33.59013936225428,130.40021051520534); // Marker option var markerOptions:MarkerOptions = new MarkerOptions({ strokeStyle: { thickness: 1.6, alpha: 1, color:0xff00ee }, fillStyle: { color: 0x174baa, alpha: 0.9 }, labelFormat: { font: "_sans", size: 10, color: 0xe1f1cb, align: TextFormatAlign.CENTER }, gravity: 0.6, radius: 14, hasShadow: true, draggable: true, tooltip: "マーカーをドラッグ", label:"天神" }); // Marker var marker:Marker = new Marker(latLng, markerOptions); // Marker on map.addOverlay(marker); // show map map.setCenter(latLng, 14, MapType.NORMAL_MAP_TYPE); // show lat lng textField showLatLng(latLng.toString()); // show 緯度経度 文字MovieClip HydroTween.go(LatLng_mc,{alpha:1},2); // show map HydroTween.go(map,{alpha:1},1.5); // marker drag event marker.addEventListener(MapMouseEvent.DRAG_END,dragEndHandler); } // show textField function showLatLng (s:String):void{ latLng_txt.text = s; } // DRAG_END handler function dragEndHandler (e:MapMouseEvent):void { var s:String = e.latLng.toString(); showLatLng(s.substring(1, s.length - 1)); } |
update
Flash API 専用のナビゲーションかと思ってたら、Javascript APIにもあった。
ピンバック: 散蓮華 » Blog Archive » Google Maps API for Flash - Marker
2009.06.22 22:52
はじめましてshirakiと申します。
私はFlash CS3でGooglemapを制作しています。
こちらのサイトを参考にNavigationControlを追加しようと試みましたが
ナゼかエラーになり追加できません。
import com.google.maps.controls.*;
map.addControl(new NavigationControl());
↑実はこれ以外にも何か必要なのでしょうか?
>Flash API 専用だと new NavigationControl()だけで(以下略
上の記事は、Flexでの話でしょうか?
イナヅマさんの開発環境はCS3(4)でしょうか?Flexでしょうか?
どうぞ宜しくアドバイス願い致します。
2009.06.23 16:31
> shiraki
Google MapのコードはFlash CS3でのフレームスクリプトです。
ステージにGoogleMapsLibraryをコンポーネント・ウインドウからドラッグして配置しています。
同時にライブラリにはGoogleMapsLibraryが追加されます。
エラーの内容が分からないのでアドバイスにもならないのですが、インポートのエラーでしたらGoogleMapsLibraryを確認してみて下さい。
ピンバック: イナヅマtvログ » Google Maps API for Flash で地図を作る + カスタムマーカー