製品

テクノロジ

A–C

D–H

I–Z

プロジェクトセンター

デベロッパーリソース

コミュニティーリソース

ブログ

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

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

ダウンロード

サンプル

トレーニング＆書籍

ニュースレター

ADC プログラム

追加リソース

Using the Yahoo! Maps Flash API

オーバーレイ：ローカル検索機能

オーバーレイは、地図の上に気象予報図が重ねられた状態を想像すると分かりやすいかも知れません。つまり、地図上に重ねられ、単一のレイヤー内に収められた、複数のマーカーとムービークリップを管理するためのコンテナがオーバーレイです。オーバーレイのデータは、地図とは別に管理されます。一度オーバーレイを初期化しておけば、オン・オフの切り替えはプログラムから制御できます。

地図やアプリケーションに LocalSearchOverlay を追加しておけば、パワフルなYahoo! Localのデータベースと各種サービスへの窓口がユーザに提供できます。地図の初期化を行った後に、 LocalSearchOverlayの新規インスタンスを作成します。オーバーレイのインスタンスはグローバル変数に保存することを推奨します。こうすることで、オーバーレイのインスタンスが以下のサンプルの機能でも利用できるようになります。オーバーレイのインスタンスを地図に追加するには、 addOverlay を利用します。

マーカーを利用する場合、ユーザがスクロールできるようにしておくと親切なので、PanToolを追加しておくことをお勧めします。ここでは、地元のコンテンツを対象とするので、デフォルトの都市としてシカゴを設定することにします。デフォルト都市の設定には setCenterByAddress()を利用します。最後に、ユーザが検索条件を入力できるようにするために、 makeLocalSearch() を使ってフォーム要素を作成します。

var _localSearch;
import com.yahoo.maps.overlays.LocalSearchOverlay;
import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap); 
function onInitMap(eventData) { 
    _localSearch = new LocalSearchOverlay(); 
    myMap.addOverlay(_localSearch);
    var panTool = new PanTool(); 
    myMap.addTool(panTool, true); 
    myMap.setCenterByAddress("Chicago");
    makeLocalSearch();
}

この簡単な makeLocalSearch 関数が文字入力フィールドとボタンを作成します。すでに解説したように、オリジナルのボタンを作成する場合は、添付されたコンポーネントまたはオリジナルのグラフィック要素が利用できます。

var _searchInput:TextField;
function makeLocalSearch() {
    
    var inputBase:MovieClip = this.createEmptyMovieClip("inputBase", 1);
    inputBase._x = 0;
    inputBase.width = 100;
    inputBase.height = 22;
    _searchInput = inputBase.createTextField("searchInput", 1, 0, 0, 100, 22);
    _searchInput.border = true;
    _searchInput.background = true;
    _searchInput.selectable = true;
    _searchInput.type = "input";
    _searchInput.text = "Pizza";
    
    var searchButton:MovieClip = this.createEmptyMovieClip("searchButton", 2);
    searchButton._x = 120;
    searchButton.moveTo(0, 0);
    searchButton.lineStyle(1, 0x000000, 100);
    searchButton.beginFill(0x999999, 100);
    searchButton.lineTo(100, 0);
    searchButton.lineTo(100, 22);
    searchButton.lineTo(0, 22);
    searchButton.lineTo(0, 0);
    var searchLabel:TextField = searchButton.createTextField("searchButton", 1, 0, 0, 100, 22);
    searchLabel.selectable = false;
    searchLabel.text = "Search";
    
    searchButton.onPress = function () {
        this._parent.searchLocal();
    }
}

さらに、上記のアドレスが解決された際に、地図にズームインするためのイベントを追加しておきます。ローカルコンテンツを利用する場合、指定の場所に近ければ近くなるほど、より関連性の高い検索結果が得られます

myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_MAP_GEOCODE_SUCCESS, onMapMove); 
function onMapMove(eventData) {
    myMap.setZoomLevel(5);
}

LocalSearchOverlay は search メソッドを利用して、ローカルデータベースにクエリをかけます。 Yahoo! Localデータベースの検索（ここでは検索条件がコードに組み込まれています）が完了すると、結果データがオーバーレイ内のマーカーとともに表示されます。

これらのマーカーは住所や評判データ、Yahoo!Localの詳細データなどが備わったローカル情報を示しているので、ユーザには、表示中の地図エリアに関する有用な情報の提供が可能になります（図３参照）。地図のズーム処理が完了した時点、あるいはユーザが送信ボタンをクリックするたびに、アプリケーションが searchLocal(): を呼び出すようにしておきます。

図３．Yahoo! Localのコンテンツが備わった地図表示（マーカー内に住所と評価データあり）

最初の使用時には、変数を設定する必要があります。ここでは、シカゴを対象都市として選んだので、ピザをデフォルトの検索条件にしておくことにします。

myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_ZOOM_STOP, searchLocal); 
function searchLocal(eventData) {
    var searchVar:String = "";
    if (_searchInput.text == undefined) {
        searchVar = "Pizza";
    } else {
        searchVar = _searchInput.text;
    }
    _localSearch.search(searchVar, this._parent.myMap.getCenter(), 1, 10);
}

LocalSearchOverlay とそのメソッドについて詳しくは、Yahoo! Maps Flash APIリファレンスマニュアル*を参照してください。

A–C

D–H

I–Z