PlaceEngine ActionScript APIの使い方

先に公開したPlaceEngine ActionScript APIの使い方コード。

Google Maps API for FlashとPlaceEngine APIを使って、現在位置を取得してそのエリアの地図を表示します。PlaceEngineサイトのAPI (Sample2)とほぼ同じ内容です。

動作例はこちら。
正しく動かすにはPlaceEngineクライアントのFlash対応版(未公開)が必要です。

以下、簡単にコードの解説などを。以下はごく基本的なところだけなので、細かい部分はソースコード全体や、ライブラリ側のコードを参照してください。ActionScriptがわかる人なら難しくないはずです。

まず、PlaceEngine APIを使うように宣言して、

import PlaceEngineAPI.PlaceEngineAPI;

コード内の適当なところで、PlaceEnginAPIの実体を定義します。

//PlaceEngineの実体を生成
pe = new PlaceEngineAPI(statusLabel, appk, onFindClient, onGetLocation, onMessage, false);

引数は順に、

statusLabel→APIからのメッセージの表示先。
appk→アプリケーションキー。
onFindClient→pingClient()を呼んでPEクライアントが存在したときのコールバック先。
onGetLocation→getLocation()を呼んで位置が取得できたときのコールバック先。
onMessage→APIでメッセージ出力がある際のコールバック先。
false→デバッグフラグ、trueでデバッグモード、省略可能。

この例はサンプルなので全部指定してますが、通常は使わないコールバック関数はnull指定でOK(省略は出来ない)。なので一般的にはこんな具合になろうかと。

pe = new PlaceEngineAPI(statusLabel, appk, null, onGetLocation, null);

で、使えるように準備したところで、ボタンが押されるなど適当なトリガーで位置取得を開始します。

//位置を取得
pe.getLocation();

位置が取れると、上記で設定したコールバックメソッドが呼び出されます。

//位置が取得できたら
private function onGetLocation(x:Number, y:Number, r:int, info:Object):void{
    if(r > 0){
        map.panTo(new LatLng(x, y));
        map.addOverlay(new Marker(new LatLng(x, y)));
    }
}

xyに経度緯度が入ってくるので、あとはそれをGoogleMapsAPIに食わせるなり何なりと。rは電波捕捉数兼エラーコードなので、0以上であることを確認しておく。infoには各種情報が連想配列になって入っているので必要に応じて使えます。

それから、位置登録ボタンが押された場合は、

//登録用のインタフェースをたたく
pe.registerLocation(map);

という具合に、登録用APIを呼びます。引数mapを指定してますが、指定しなくてもOK。

画面の作りはこんな感じで。PlaceEngineの推奨構成があるのでそれに準拠してます。

  <mx:Panel title="PlaceEngine API Flash version. Ver.20080726" width="100%" height="100%" layout="absolute">
    <mx:UIComponent id="mapContainer" 
        initialize="startMap(event);"
        resize="resizeMap(event)" 
        right="0" left="0" bottom="78" top="30"/>
    <mx:TextArea id="messageArea" right="0" left="0" bottom="0" height="70" wordWrap="true" verticalScrollPolicy="auto"/>
    <mx:Button icon="@Embed('asset/wide_bt2.png')" width="102" height="22" id="registerButton"
        click="registerButtonClick(event)" enabled="true"
        useHandCursor="true" buttonMode="true" mouseChildren="false" left="5" top="5"/>
    <mx:Button icon="@Embed('asset/wide_bt1.png')" width="102" height="22" id="getLocationButton"
        click="getLocationButtonClick(event)" enabled="true"
        useHandCursor="true" buttonMode="true" mouseChildren="false" top="5" left="115"/>
    <mx:Image id="peLogo" source="@Embed('asset/logo_wh.gif')"  
        click="navigateToURL(new URLRequest('http://www.placeengine.com'))"
         useHandCursor="true" buttonMode="true" mouseChildren="false" top="5" right="5"/>
    <mx:Label id="statusLabel" top="7" left="220" right="125" text="PlaceEngineをインストールすると現在位置取得機能が使えるようになります"/>
  </mx:Panel>

以下、コードの全文。ダウンロードはこちら。txtをmxmlに変更して使ってください。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%"
    applicationComplete="init()">

  <mx:Script>
    <![CDATA[
        import mx.controls.Text;

        import flash.events.Event;

        import PlaceEngineAPI.PlaceEngineAPI;

        import com.google.maps.Map;
        import com.google.maps.MapType;
        import com.google.maps.MapEvent;
        import com.google.maps.LatLng;
        import com.google.maps.overlays.Marker;
        import com.google.maps.controls.MapTypeControl;
        import com.google.maps.controls.PositionControl;
        import com.google.maps.controls.ZoomControl;
        
    
         //PlaceEngineの実体
         private var pe:PlaceEngineAPI;

        //GoogleMapの実体
         private var map:Map;
        //マップ初期化OKかフラグ 
         private var isMapReady:Boolean = false;
    
        //初期化コード
        public function init():void{
            
            //アプリケーションキー(自分で取得したものをここにセットする)
            var appk:String = "ABCDEFG......";

            //PlaceEngineの実体を生成
            pe = new PlaceEngineAPI(statusLabel, appk, onFindClient, onGetLocation, onMessage, false);
            
            //PEクライアントの有無を確認
            pe.pingClient();
            
        }

        //GoogleMap初期化コード
        public function startMap(event:Event):void {
            
            //mapを生成
            map = new Map();
            
            //上手くgoogleと接続できてたら
            if(map != null){
                //キーをセット(自分で取得したものをここにセットする)
                map.key="ABCDEFG....";
                
                //イベントリスナ登録
                map.addEventListener(MapEvent.MAP_READY, onMapReady);
                
                //マップを登録
                mapContainer.addChild(map);
                
            }else{
                trace("GoogleMapロードエラー");
            }
        }
        
        //位置取得
        private function getLocationButtonClick(event:Event):void{

            //PEサイトへのリンクロゴを消す(ステータス表示のため)
            if(peLogo.visible == true){
                peLogo.visible = false;
            }
            
            //位置を取得
            pe.getLocation();
        }
        
        //位置が取得できたら
        private function onGetLocation(x:Number, y:Number, r:int, info:Object):void{
            
            if(r > 0){
                map.panTo(new LatLng(x, y));
                map.addOverlay(new Marker(new LatLng(x, y)));
            }
        }

        //位置登録
        private function registerButtonClick(event:Event):void{
            //PEサイトへのリンクロゴを消す(ステータス表示のため)
            if(peLogo.visible == true){
                peLogo.visible = false;
            }
            //登録用のインタフェースをたたく
            pe.registerLocation(map);
        }
        
        //PEクライアントに対するping応答があったら
        private function onFindClient(ver:String):void{
            //messageArea.text += "\r" + "PlaceEngineクライアントのバージョンは " + ver + " です";
        }
        
        //メッセージが出力されると呼ばれるメソッド
        private function onMessage(msg:String):void{
            messageArea.text += "\r" + msg;
        }
        
        //リサイズされたとき
        public function resizeMap(event:Event):void {
            
            //マップの準備ができてないときにもこのイベントは発生するので
            //準備ができているかをチェックする
            if(isMapReady == true){
                
                //マップがOKならリサイズする
                map.setSize(new Point(mapContainer.width, mapContainer.height));
            }
        }
    
        //マップの準備が出来たら呼ばれるイベントハンドラ  
        private function onMapReady(event:MapEvent):void {
            
            //マップの準備ができたかフラグ
            isMapReady = true;
            
            //初期位置を皇居にセット
            map.setCenter(new LatLng(35.684281,139.75163), 14, MapType.NORMAL_MAP_TYPE);
            
            //各種部品を付ける
            map.addControl(new ZoomControl());
            map.addControl(new PositionControl());
            map.addControl(new MapTypeControl());
            
            //マップがOKならリサイズする
            map.setSize(new Point(mapContainer.width, mapContainer.height));

        }
    ]]>
  </mx:Script>
    
  <mx:Panel title="PlaceEngine API Flash version. Ver.20080726" width="100%" height="100%" layout="absolute">
    <mx:UIComponent id="mapContainer" 
        initialize="startMap(event);"
        resize="resizeMap(event)" 
        right="0" left="0" bottom="78" top="30"/>
    <mx:TextArea id="messageArea" right="0" left="0" bottom="0" height="70" wordWrap="true" verticalScrollPolicy="auto"/>
    <mx:Button icon="@Embed('asset/wide_bt2.png')" width="102" height="22" id="registerButton"
        click="registerButtonClick(event)" enabled="true"
        useHandCursor="true" buttonMode="true" mouseChildren="false" left="5" top="5"/>
    <mx:Button icon="@Embed('asset/wide_bt1.png')" width="102" height="22" id="getLocationButton"
        click="getLocationButtonClick(event)" enabled="true"
        useHandCursor="true" buttonMode="true" mouseChildren="false" top="5" left="115"/>
    <mx:Image id="peLogo" source="@Embed('asset/logo_wh.gif')"  
        click="navigateToURL(new URLRequest('http://www.placeengine.com'))"
         useHandCursor="true" buttonMode="true" mouseChildren="false" top="5" right="5"/>
    <mx:Label id="statusLabel" top="7" left="220" right="125" text="PlaceEngineをインストールすると現在位置取得機能が使えるようになります"/>
  </mx:Panel>
  
</mx:Application>