イナヅマTVログ

Google Maps API for Flash で地図を作る + マーカーを付ける

| 4件のコメント

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());
Google Map with Marker by Flash

Google Map with Marker by Flash

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にもあった。

4件のコメント

  1. ピンバック: 散蓮華 » Blog Archive » Google Maps API for Flash - Marker

  2. はじめましてshirakiと申します。

    私はFlash CS3でGooglemapを制作しています。
    こちらのサイトを参考にNavigationControlを追加しようと試みましたが
    ナゼかエラーになり追加できません。
    import com.google.maps.controls.*;
    map.addControl(new NavigationControl());
    ↑実はこれ以外にも何か必要なのでしょうか?

    >Flash API 専用だと new NavigationControl()だけで(以下略
    上の記事は、Flexでの話でしょうか?
    イナヅマさんの開発環境はCS3(4)でしょうか?Flexでしょうか?
    どうぞ宜しくアドバイス願い致します。

  3. > shiraki
    Google MapのコードはFlash CS3でのフレームスクリプトです。
    ステージにGoogleMapsLibraryをコンポーネント・ウインドウからドラッグして配置しています。
    同時にライブラリにはGoogleMapsLibraryが追加されます。
    エラーの内容が分からないのでアドバイスにもならないのですが、インポートのエラーでしたらGoogleMapsLibraryを確認してみて下さい。

  4. ピンバック: イナヅマtvログ » Google Maps API for Flash で地図を作る + カスタムマーカー

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください