今回は、自作の検索APIの情報を地図にプロットする方法なのですが、ちょっと一から自作の検索APIを作成するのは大変なので、YOLPの ローカルサーチAPI を自作のAPIと見立てて YOLPに標準で装備されている、Y.LocalSearch を使用しないでリクエストする方法を解説していきます。
これができることによって、今すでにある位置情報系サービスに、YOLPの情報を簡単に追加することも可能になると思います。
前回と同様ですが、今回のサンプルページです。
サンプルでは、すき屋の情報を、Y.LocalSearch を使用して地図にプロット。マクドナルドの情報を、ローカルサーチAPI を直接リクエストして地図にプロットしています。
今回もYOLPのカセットギャラリーのデータを使用しています。
ローカルサーチAPIにリクエストして、結果を地図にプロットしている箇所
var search_plus = function(lat,lon) {
var cid = 'd115e2a62c8f28cb03a493dc407fa03f';
$.getJSON("http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?output=json&lat=" + lat + "&lon=" + lon + "&cid=" + cid + "&dist=10&results=10&sort=10&appid=（取得したAPPID)&callback=?",function(result){
var cid = 'd115e2a62c8f28cb03a493dc407fa03f';
$.getJSON("http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch?output=json&lat=" + lat + "&lon=" + lon + "&cid=" + cid + "&dist=10&results=10&sort=10&appid=（取得したAPPID)&callback=?",function(result){
for (var i = 0, len = result.Feature.length; i < len; i++ ) {
var feature = result.Feature[i];
var latLng = feature.Geometry.Coordinates.split(',');
var marker = new Y.Marker(new Y.LatLng(latLng[1],latLng[0]),{icon:icon_m});
ymap.addFeature(marker);
marker.bindInfoWindow('<div class="info_window"><a href="http://loco.yahoo.co.jp/place/' + feature.Property.Uid + '/" target=_blank >' + feature.Name + '</a><p>住所 [ ' + feature.Property.Address + ' ] </p><p>ジャンル [ ' + feature.Property.Genre[0].Name + ' ] </p></div>');
}
});
}
var feature = result.Feature[i];
var latLng = feature.Geometry.Coordinates.split(',');
var marker = new Y.Marker(new Y.LatLng(latLng[1],latLng[0]),{icon:icon_m});
ymap.addFeature(marker);
marker.bindInfoWindow('<div class="info_window"><a href="http://loco.yahoo.co.jp/place/' + feature.Property.Uid + '/" target=_blank >' + feature.Name + '</a><p>住所 [ ' + feature.Property.Address + ' ] </p><p>ジャンル [ ' + feature.Property.Genre[0].Name + ' ] </p></div>');
}
});
}
$.getJSONにより、ローカルサーチAPIにリクエストし、resultにレスポンスを取得します。
その後は、Y.LocalSearch で取得した場合と同様、件数分繰り返し処理を行います。
ただ、データ構造が若干違うので、 ローカルサーチAPIのレスポンスのリファレンスや、console.log(result)により確認してください。
注意点としては、ローカルサーチAPIからの緯度経度のレスポンスは、
Feature.Geometry.Coordinates に格納されているのですが、lat, lon の順ではなく lon, lat で格納されているので、気をつけてください。
緯度経度が取得できれば、 Y.LatLng を使用して緯度経度情報をプロットできる形に成型します。
その後は、前々回の解説を参照ください。
呼び出す際は、以下のように地図の移動後両方の検索を行います。
ymap.bind('moveend',function(){
var latLng = ymap.getCenter();
ymap.clearFeatures();
search(latLng.lat(),latLng.lng());
search_plus(latLng.lat(),latLng.lng());
current_point(latLng.lat(),latLng.lng());
});
var latLng = ymap.getCenter();
ymap.clearFeatures();
search(latLng.lat(),latLng.lng());
search_plus(latLng.lat(),latLng.lng());
current_point(latLng.lat(),latLng.lng());
});
検索は、並列にAPIをリクエストして、レスポンスの順番の制御を行っていないので一旦リクエストの直前に、マーカーの削除処理 ymap.clearFeatures(); を行っています。
これで、自作の検索APIの情報も地図にプロットするためのサンプルの出来上がりです。
関連
YOLP (Yahoo! Open Local Platform) で周辺検索
YOLP (Yahoo! Open Local Platform) で緯度経度から住所取得
