_Google Maps API for Flashを使う その2
- 2009-05-05(火)
- ActionScript,
- Flash,

Google Maps API for Flashを使う その2です。
今回は、Google Mapsにラインを引きます。
ただ、普通にラインを引くだけなら以下のように簡単にできます。
今回は、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);*/
ここでは、エンコード化ポリラインを使ってラインを引いてみます。
このコードの『}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
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でつぶやく (投稿画面に飛びます)
- Newer: _AIRの配布方法
- Older: _Google Maps API for Flashを使う その1





