_Google Maps API for Flashを使う その2

Google Maps API for Flashを使う その2です。

今回は、Google Mapsにラインを引きます。
ただ、普通にラインを引くだけなら以下のように簡単にできます。
var polyline:Polyline = new Polyline([
    map.getCenter(),
    new LatLng(35.6656, 139.7310)
    ], new PolylineOptions({ strokeStyle: new StrokeStyle({
          color: 0xFF0000,
          thickness: 4,
          alpha: 0.7})
}));
map.addOverlay(polyline);*/
ここでは、エンコード化ポリラインを使ってラインを引いてみます。
package {
	
	import flash.display.Sprite;
	import flash.geom.Point;
	import com.google.maps.Map;
	import com.google.maps.MapType;
	import com.google.maps.MapEvent;
	import com.google.maps.LatLng;
	import com.google.maps.LatLngBounds;
	//import com.google.maps.overlays.Marker;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.controls.ZoomControl;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.controls.ScaleControl;
	import com.google.maps.controls.ControlBase;
	import com.google.maps.controls.OverviewMapControl;
	import com.google.maps.overlays.*;
	import com.google.maps.styles.StrokeStyle;
	
	public class Main extends Sprite {
		
		const GOOGLE_MAP_KEY:String = "API-KEY";//Google Maps API Keyを記述
		var googleMaps:Map;	//マップオブジェクト
		var encodedPoints:String = "}nyxEyrpsYxv@uf@tqDyJncC_dCtyAw|Cye@{wAmfFay@cn@i`A}q@lbAs~@}Sk{@taBx`AlSii@jtFyqC}f@o@pzCh_DzZ";
		var encodedLevels:String = "BBBBBBBBBBBBBBBB";
	
		//コンストラクタ
		public function Main() {
			initMap();
		}
		
		//Google Maps 作成
		function initMap():void {
			//マップ生成
			googleMaps = new Map();
			//基本設定
			googleMaps.key = GOOGLE_MAP_KEY;//APIキー登録
			googleMaps.language = "ja";	//言語
			googleMaps.setSize(new Point(stage.stageWidth, stage.stageHeight));	//マップサイズ
			//コントロール表示
			googleMaps.addControl(new PositionControl());//ポジションコントロールを表示
			googleMaps.addControl(new ZoomControl());//ズームコントロールを表示
			googleMaps.addControl(new MapTypeControl());//マップタイプコントロールを表示
			googleMaps.addControl(new OverviewMapControl());//概要マップの表示
			googleMaps.addControl(new ScaleControl());//距離の表示
			//イベント設定
			googleMaps.addEventListener(MapEvent.MAP_READY, onMapReady);
			//配置
			addChild(googleMaps);
		}
		
		//地図生成完了
		function onMapReady(event:MapEvent):void {
			//初期表示設定
			googleMaps.setCenter(new LatLng(35.6585,139.7454), 12, MapType.NORMAL_MAP_TYPE);
			//操作設定
			googleMaps.enableScrollWheelZoom();	//スクロールホイールでのズーム許可
			googleMaps.enableContinuousZoom();//連続ズームの許可
			//googleMaps.enableControlByKeyboard();//キーボードによるマップ操作の許可
			
			//ライン
			var encodedPolyline:Polyline = Polyline.fromEncoded(
				new EncodedPolylineData(encodedPoints, 32, encodedLevels, 4), 
				new PolylineOptions({ strokeStyle: new StrokeStyle({
					color: 0x0000ff,
					thickness: 4,
					alpha: 0.7})
				}));
			googleMaps.addOverlay(encodedPolyline);

			//イベントリスナーを削除
			googleMaps.removeEventListener(MapEvent.MAP_READY, onMapReady);
		}
	}
}
24行目と25行目に以下のコードがあります。
このコードの『}nyxEyrpsYxv@uf@tqDyJncC_dCtyAw|Cye@{wAmfFay@cn@i`A}q@lbAs~@}Sk{@taBx`AlSii@jtFyqC}f@o@pzCh_DzZ』『BBBBBBBBBBBBBBBB』というのがあると思うのですが、ここの部分がポイントです。
それぞれに、『エンコード化ポリライン』『エンコード化レベル』を設定します。
以下のページで、『エンコード化ポリライン』『エンコード化レベル』を調べることができます。
対話型のポリライン エンコーダ ユーティリティ - Google Maps API - Google Code
var encodedPoints:String = "}nyxEyrpsYxv@uf@tqDyJncC_dCtyAw|Cye@{wAmfFay@cn@i`A}q@lbAs~@}Sk{@taBx`AlSii@jtFyqC}f@o@pzCh_DzZ";
var encodedLevels:String = "BBBBBBBBBBBBBBBB";
ただ、ちょっとしたバグ(?)があるようで、設定するポイントが多すぎるとラインがうまく表示されません。数を減らすことで、回避できました。

このエントリーをTwitterでつぶやく (投稿画面に飛びます)

Comment Form
 

Trackback:0

TrackBack URL for this entry
http://paphead.com/mt/mt-tb.cgi/49
Listed below are links to weblogs that reference
_Google Maps API for Flashを使う その2from PAPHEAD

ayuzak

ディレクターをしています。
このブログは、自分自身のメモとして運営しています。

もっと見る

twitter

@paphead
カテゴリ

なかのひと