地図の表示

以上でAPIを利用する用意ができました。APIキー発行後に表示される画面に、地図を表示するだけのサンプルソースが表示されます。試しにそれをコピー＆ペーストして実行してみましょう。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:mapion="http://www.mapion.co.jp/mmap/flex">
 
   <mx:Panel title="sample of Flash Maps API" width="100%" height="100%">
 
      <mapion:FlexMapionMap
         width="100%" height="100%" mode="labs"
         key="発行したAPIキー"
         latitude="35.6800" longitude="139.7500"
         zoomLevel="7" />
   </mx:Panel>
 
</mx:WindowedApplication>
		  

以下の通りPanelコンポーネント内に地図が表示されればOKです。ドラッグ＆ドロップで地図スクロールも行なえます。

地図への基本操作

FlexMapionMapがAPIのメインコンポーネントです。表示座標や縮尺レベルの指定はこのコンポーネントに対して操作を行ないます。座標系や縮尺レベル、地図への基本操作に関してはマピオンAPIドキュメントページに記載がありますので、そちらをご参考ください。

外部データの取得および地図へのプロット

緯度経度情報を持ったデータを動的に読み込み、地図上へプロットします。読み込むデータは以下とします。

data.xml

<datas>
  <data>
    <latitude>35.68716</latitude>
    <longitude>139.76093</longitude>
    <title>データ１</title>
    <description>１個目のサンプルデータです</description>
  </data>
  <data>
    <latitude>35.68064</latitude>
    <longitude>139.74742</longitude>
    <title>データ２</title>
    <description>２個目のサンプルデータです</description>
  </data>
  <data>
    <latitude>35.67373</latitude>
    <longitude>139.75899</longitude>
    <title>データ３</title>
    <description>３個目のサンプルデータです</description>
  </data>
</datas>

上記xmlデータを読み込み地図上へプロットするサンプルは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:mapion="http://www.mapion.co.jp/mmap/flex"
   width="600" height="450">
 
   <mx:Script>
     <![CDATA[
         import mx.rpc.events.ResultEvent;
         private function resultHandler(event:ResultEvent):void
         {
           map.dataProvider = event.result..data;
         }
     ]]>
   </mx:Script>
 
   <mx:HTTPService id="hs"
      url="data.xml" resultFormat="e4x"
      result="resultHandler(event)" />
 
   <mx:Panel title="sample of Flash Maps API" width="100%" height="100%">
 
      <mapion:FlexMapionMap id="map"
         width="100%" height="100%" mode="labs"
         key="発行したAPIキー"
         latitude="35.6800" longitude="139.7500"
         zoomLevel="6"
         map_ready="hs.send()" />
   </mx:Panel>
 
</mx:WindowedApplication>

外部データの取得にはHTTPServiceコンポーネントを利用しています。地図コンポーネントの初期化を待つ必要があるため、map_readyイベントをトリガにデータ取得を行なっている点に注意してください。外部データ取得後、データのコレクションオブジェクト（上記サンプルではXMLListオブジェクト）をFlexMapionMapコンポーネントのdataProviderプロパティに渡しています。dataProviderプロパティはFlexにあるList系コンポーネントが持つdataProviderプロパティと似ています。緯度経度はデータプロバイダアイテム内の特定フィールドから取得され、デフォルトのフィールド名は「latitude」「longitude」です。これを変更するにはFlexMapionMapコンポーネントの「markerDataLatitude」「markerDataLongitude」を変更してください。

上記サンプルを実行するとデータ内の緯度経度地点を指すマーカーが３つ、地図上にプロットされます。

座標系の変換

dataProviderへ入力する緯度経度データは日本測地系である必要があります。ただしデータによっては世界測地系となっている場合もあります。厳密な精度は保障していませんが、世界測地系座標と日本測地系座標を相互に変換するユーティリティ関数がAPIに含まれています。

日本測地系→世界測地系　　　AdapterUtil.j2w(p:Point):Point
世界測地系→日本測地系　　　AdapterUtil.w2j(p:Point):Point

var w_lat:Number; // 世界測地系緯度
var w_lon:Number; // 世界測地系経度
:
var w_point:Point = new Point(w_lon, w_lat);
var j_point:Point = AdapterUtil.w2j(w_point);
 
var latitude:Number = j_point.y; // 日本測地系緯度
var longitude:Number = j_point.x; // 日本測地系経度

データ項目の表示

前述のサンプルでは、データプロバイダアイテム内のテキスト情報などが表示されていません。プロットされたマーカーをクリックすることにより、情報ウィンドウを開いてデータプロバイダアイテム内のテキスト情報などを表示させることが可能です。サンプルコードは以下です。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:mapion="http://www.mapion.co.jp/mmap/flex"
   width="600" height="450">
 
   <mx:Script>
    <![CDATA[
    import jp.co.mapion.mmap.overlay.flex.MOverlay;
    import jp.co.mapion.mmap.event.MMapEvent;
    import mx.rpc.events.ResultEvent;
    private function resultHandler(event:ResultEvent):void
    {
      map.dataProvider = event.result..data;
    }
    private function markerClickHandler(event:MMapEvent):void
    {
      var markerObj:MOverlay = event.clickedOverlay as MOverlay;
      var data:* = markerObj.extra;
      markerObj.openInfoWindowHTML(data.title.toString()+":"
      +data.description.toString());
    }
  ]]>
</mx:Script>
 
   <mx:HTTPService id="hs"
    url="data.xml" resultFormat="e4x"
    result="resultHandler(event)" />
 
   <mx:Panel title="sample of Flash Maps API" width="100%" height="100%">
 
      <mapion:FlexMapionMap id="map"
         width="100%" height="100%" mode="labs"
         key="発行したAPIキー"
         latitude="35.6800" longitude="139.7500"
         zoomLevel="6"
         map_ready="hs.send()"
         markerClickFunction="{markerClickHandler}" />
   </mx:Panel>
 
</mx:WindowedApplication>

FlexMapionMapコンポーネントのmarkerClickFunctionプロパティにイベントハンドラとなる関数参照を渡すことで、プロットされたマーカーのクリックイベントを制御することができます。イベントハンドラ内ではイベントオブジェクト経由でマーカーオブジェクトとデータプロバイダアイテムにアクセスすることができます。マーカーオブジェクトはMOverlayクラスを継承したクラスのオブジェクトで、マーカーを操作するメソッドを持ちます。このサンプルではその中のopenInfoWindowHTMLメソッドを利用してテキスト情報を情報ウィンドウに表示します。

ページ 3 / 4

前のページ

次のページ