製品

テクノロジ

A–C

D–H

I–Z

プロジェクトセンター

デベロッパーリソース

コミュニティーリソース

ブログ

MXNA* (ブログアグリゲータ)
Adobe ブログ*

製品ドキュメンテーション

ダウンロード

サンプル

トレーニング＆書籍

ニュースレター

ADC プログラム

追加リソース

Using the Yahoo! Maps Flash API

基礎：YahooMapコンポーネントについて

では、順番に話を進めることにします。

コンポーネントのインストール

Yahoo! Maps MXP*をダウンロードします。
ダウンロードしたMXPをダブルクリックして、Macromedia Extension Managerを起動します。この際、最新版の拡張マネージャのダウンロードを求められることがあります。インストール条件に合意し、「OK」をクリックすると、APIがインストールされます。
アプリケーションID*をYahoo! Developer Networkより取得します。
Flashアプリケーション（Flash MX 2004またはそれ以降）を起動し、コンポーネントウィンドウを開きます（Control + F7キー）。コンポーネントパネルの一覧に、YahooMapコンポーネントが表示されます。

ステージの準備

Flashファイルを新規作成します。
YahooMapコンポーネントをステージ上にドラッグし、このコンポーネントが選択されたままの状態にしておきます。
ステージ上のYahooMapコンポーネントが選択された状態でプロパティパネルを開き、YahooMapコンポーネントのインスタンス名をmyMapに設定します。（この記事内のコードは、すべて、地図のインスタンスを「myMap」として参照。）
プロパティパネルに数値を入力するか、自由変形ツール（Q）を利用してコンポーネントのサイズを500 x 400ピクセルに変更します。
プロパティパネルに戻り、「パラメータ」タブを選択します。 AppIDの欄に、Yahoo! Developer Networkから取得したアプリケーションIDを入力します。

世界がここから広がります

FLAファイルをコンパイルします（Control + Enterキー）。
では、引き続きこの記事を読み進め、Yahoo! Maps APIを使うことで、どのような世界が広がるかを確認してください。

ツールとウィジェット：地図の制御

ツールとは、表示中のコンテンツに関する、より多くの制御性を提供するために追加できる、一連のビヘイビアのことです。地図に対するユーザ操作の中で、最も頻繁に用いられるのがスクロール（パンニング）です。 PanToolクラスをインポートして、このインスタンスを地図初期化時に作成すると、クリック＆ドラッグ操作であらゆる方向に地図をスクロールできるようになります。また、スクロール用のクラスを追加すると、クリックとダブルクリックの機能も加わり、クリックの場合は表示の中心がその場所に移動し、ダブルクリックの場合はその場所にズームインします。

import com.yahoo.maps.tools.PanTool; 
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
     var panTool = new PanTool(); 
     myMap.addTool(panTool, true); 
}

注意：節ごとに新しいFLAファイルを用意するようにしてください。本チュートリアルの各サンプルは、新しいFLAファイルに作成されることを前提に解説されています。これは、どの機能についての解説が行われているかを、容易に理解できるようにするためです。

NavigatorWidgetは必要度の高いズームバーと、スーパー「ミニマップ」ナビゲーションツールを組み合わせたクールなインタフェースです。ミニマップでは、ごくわずかな大きさのウィンドウ内に、とても広範な地図データが表示されます。ミニマップはより大きな地図に対する精密なナビゲーションのようなものです。

ミニマップの中心にはドラッグ可能なボックスがあります（一部では「ホッケーパック」とも呼ばれています）。ユーザがこのボックスを上に移動すると、表示対象の地図が上へと移動します（他の方向も同じように動作します）。なお、ミニマップ中心のボックスは、常にコンポーネント全体の縦横比と同じ比率で表示されます。このウィジェットは地図の右上部に表示されます。

import com.yahoo.maps.widgets.NavigatorWidget;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
     var navWidget = new NavigatorWidget("open"); 
     myMap.addWidget(navWidget); 
}

NavigatorWidgetにはopenとclosedの２つのステートがあり、インスタンス作成時に初期ステートを指定することで、どちらが使用されるかを制御できます。設定をclosedにするとNavigatorには縦型のズームバーだけが表示されます。また、Navigatorが開いている場合は、左側に表示されている小さな白矢印をクリックすることでNavigatorを閉じることができます（図１参照）。 Flashスタイルを踏襲した、このウィジェットでは、ステート切り替え時の表示がアニメーション化されています。

図１．一部のエリアを拡大表示するために利用できる、ミニマップを備えたNavigatorWidget

マップビューの変更に関しては後ほどサンプルを使って詳しく解説しますが、SatelliteControlWidgetを使えば、手軽にマップビューを切り替えるためのクールな手段がユーザに提供できます。 SatelliteControlWidgetは３つのボタン（マップビューの種類に対して１つずつ）から構成され、地図の左上部に表示されます。

このサンプルは、ウィジェットのインスタンスを変数に保存しなくても、インスタンスが作成できることを示すものです。この方法にはコード量を節約できるというメリットがあるものの、このウィジェットのメソッドが呼び出しにくくなるという短所があります。 Navigatorの場合とは異なり、Satellite Controlにはopen、closedのステートがありません。

import com.yahoo.maps.widgets.SatelliteControlWidget; 
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
     function onInitMap(eventData) { 
     myMap.addWidget(new SatelliteControlWidget());
}

A–C

D–H

I–Z