最寄りのマクドナルドを検索する
さてそのsearchNearestMcDonaldの中身です。「渡された緯度経度に一番近いマクドナルドの店舗を検索する」のがこのメソッドに課せられたタスクです。
店舗を検索するには、YOLPのローカルサーチAPIを利用します。
ローカルサーチAPIで特徴的なのは、検索するデータベース空間を指定する部分です。YOLPではデータベース空間を「カセット」と呼んでいますが、一般的な検索では電話帳カセットを指定すればほぼすべての店舗が対象となります。ただし、今回のように「マクドナルドを検索する」場合、どうやってマクドナルドの店舗に絞り込むかが問題となります。もっと具体的に言えば、「ハンバーガー屋でマクドナルドという名前を含むが日本マクドナルド株式会社のフランチャイズではない店が存在する、という可能性を否定できない」ため厳密な絞り込みは困難です。
幸い、YOLPのカセットギャラリーにはマクドナルド店舗のみを網羅したカセットが日本マクドナルド株式会社から公式に提供されています。このカセットを指定して検索を行います。
マクドナルド店舗情報カセットのカセットID（cid）は「d115e2a62c8f28cb03a493dc407fa03f」です。これをリクエストパラメータのcidに指定します。
また、「一番近い」店舗だけ分かればよいので、検索結果も1件だけでOKです。resultsに「1」を指定します。
おっと、「一番近い」ということは検索は距離順に行ってもらう必要があります。sortに「dist」を指定することで、デフォルトのレーティング順ではなく指定した位置からの距離順に検索してくれます。
あとはメインの検索クエリである緯度経度をlat、lonに指定し（Y.LatLngオブジェクトのメソッドはlat、lngですが、ローカルサーチAPIのパラメータ名はlat、lonなので注意してください）、出力形式にjsonを指定して、ローカルサーチAPIを呼び出します。
ローカルサーチから正しく結果が帰ったら、ルートを検索し地図に表示するupdateRouteを呼び出します。いよいよ本番です。
var searchNearestMcDonald = function(latlng){
$.ajax({
url: "http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch",
dataType: "jsonp",
data:{
appid: ＜あなたのアプリケーションID＞,
cid: "d115e2a62c8f28cb03a493dc407fa03f",
results: 1,
lat: latlng.lat(),
lon: latlng.lng(),
sort: "dist",
output: "json"
},
success: function(result){
updateRoute(latlng, result);
}
});
}
マクドナルドまでのルートを検索・表示する
いよいよ本番ですと書きましたが、実はこの部分の実装は拍子抜けするほど簡単です。
YOLPには経路検索を行うリッチなプラグインが用意されており、初期化時に緯度経度の配列を渡すとその地点間の経路を探索し、地図上に表示するところまで自動的に行ってくれます（ルート全体が入るように地図の縮尺を適切に変更までしてくれます）。
よって、ここで行うのは経路探索プラグイン（Y.RouteSearchPlugin）に現在位置とマクドナルドの位置の2点を渡して初期化してやることだけです。ただし、経路探索プラグインはそもそもGUIによる操作を前提としたプラグインなので、再探索などをスクリプトから動的に指示することはできません。このため、新しくupdateRouteが呼ばれるたびに既存のプラグインを削除し作りなおす形を取っています。Y.RouteSearchPluginの引数オブジェクトのlatlngsに現在位置とマクドナルドの位置の2点を配列として渡して初期化し、Y.MapにaddPluginすれば地図にルートが表示されます。ローカルサーチAPIからの戻り値（result）のFeature[0]が1番目の検索結果であり、そのGeometry.Coordinatesに位置が「経度,緯度」の順でカンマ区切りに記述されています。
var plugin = null;
var updateRoute = function(latlng, result){
var coords = result.Feature[0].Geometry.Coordinates.split(",");
if(plugin){
map.removePlugin(plugin);
}
plugin = new Y.RouteSearchPlugin({latlngs:[
latlng,
new Y.LatLng(coords[1],coords[0])
]});
map.addPlugin(plugin);
}
名称や電話番号を表示
これで主なシナリオはほぼ実装が終わりました。あと、検索したマクドナルドの店舗名や電話番号を表示するところを実装してみましょう。
これらの情報も位置と同様に検索結果に含まれて返されるので、result.Feature[0]から抜き出します。Nameに店舗名称が、Property.Addressに住所文字列が、Property.Tel1に電話番号が格納されています。店舗名称はそのままだと「マクドナルド六本木ヒルズ店」といった具合に必ず「マクドナルド」が頭に付くため、マクドナルド検索するアプリなんだからマクドナルドなのは分かっているんだよ！ということでこれを取り除いています。
さらに、現在位置からマクドナルド店舗までの道のりを経路探索プラグインから取得してメートル単位に変換して表示します。
var name = result.Feature[0].Name;
var address = result.Feature[0].Property.Address;
var tel = result.Feature[0].Property.Tel1;
var simplename = name.replace('マクドナルド','');
var distance = (plugin.estimateDistance() * 1000) + 'm';
$('#title').html(simplename + '(' + distance + ')');
$('#desc').html(address + '<br /><a href="tel:' + tel + '">' + tel + '</a>');
