1月 15 2009
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にもあった。



2009 年 4 月 17 日 10:28 AM
[...] _level0.KAYAC – Google Map を使ってみる。 _level0.KAYAC – Google Map を使ってみる。markerとInfoWindow 1ka2ka.com – CS3 版の Google Maps API for Flash でいろいろ遊んでみる イナヅマtvログ – Google Maps API for Flash で地図を作る + マーカーを付ける [...]
2009 年 6 月 22 日 10:52 PM
はじめましてshirakiと申します。
私はFlash CS3でGooglemapを制作しています。
こちらのサイトを参考にNavigationControlを追加しようと試みましたが
ナゼかエラーになり追加できません。
import com.google.maps.controls.*;
map.addControl(new NavigationControl());
↑実はこれ以外にも何か必要なのでしょうか?
>Flash API 専用だと new NavigationControl()だけで(以下略
上の記事は、Flexでの話でしょうか?
イナヅマさんの開発環境はCS3(4)でしょうか?Flexでしょうか?
どうぞ宜しくアドバイス願い致します。
2009 年 6 月 23 日 4:31 PM
> shiraki
Google MapのコードはFlash CS3でのフレームスクリプトです。
ステージにGoogleMapsLibraryをコンポーネント・ウインドウからドラッグして配置しています。
同時にライブラリにはGoogleMapsLibraryが追加されます。
エラーの内容が分からないのでアドバイスにもならないのですが、インポートのエラーでしたらGoogleMapsLibraryを確認してみて下さい。
2009 年 7 月 2 日 9:50 PM
[...] Google Maps API for Flash で地図を作る + マーカーを付ける、にカスタムマーカーを設置してみました。 [...]