YOLPで周辺検索 - coding note
Yahoo!がAPIとして提供している YOLP (Yahoo! Open Local Platform)を使用して、
よくある周辺検索のサンプルを作ってみたいと思います。
YOLPを使用した周辺検索サンプル
YOLP自体について詳しくはこちら
まずYOLPを使うためには、アプリケーションIDが必要になるため、まだ取得していない方は、無料で取得可能なので、こちら から、ページの説明に従って取得ください。
アプリケーションIDが取得出来たら、まずは自分のサイトに地図を表示してみましょう。
特に今回はサーバサイドでプログラムはしないので関係ないのですが、前回セットアップした、CodeIgniterの環境で開発してみます。
前回の内容 CodeIgniter2.1.0 セットアップ
application/controller/sample.php を作成
<?php
class Sample extends CI_Controller
{
public function map()
{
//map.php テンプレートを呼び出しているだけ
$this->load->view('map');
}
}
application/views/map.php の作成
<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:800px; height:600px"></div>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(取得したアプリケーションID)"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map",{
configure : {
doubleClickZoom : true
}
});
var ymap = new Y.Map("map",{
configure : {
doubleClickZoom : true
}
});
ymap.drawMap(new Y.LatLng(35.3192254, 139.54668679999997), 17, Y.LayerSetId.NORMAL);
}
</script>
</body>
</html>
この地図に、ローカルサーチAPIを使って地点情報をプロットします。
サーバサイト側で、このAPIを使って地図にプロットすることももちろん可能ですが、今回はjavascriptのみを使用して、実装します。
※サーバサイドでYOLPを使用しているサンプルはこちらにソースコードを公開しています。
地図をドラッグして移動すると、移動後の中心点から近い順に10件の地点情報を取得して地図上にプロットしています。
地図上にプロットするアイコンは自作のアイコンを使用しています。
吹き出しには、地点の名称と、Yahoo!ロコのPOIへのリンク、住所、ジャンル名を表示します。
全体の動作とソースコードは、サンプルで確認ください。
1. ローカルサーチAPIをjavascript経由でリクエスト
var local = new Y.LocalSearch(); //40行目
local.search(keyword,cid,options,function(result) { //48行目
ローカルサーチのインスタンスを生成し、ローカルサーチの searchメソッドを使用します。
引数に関しての詳細は、こちら
cid (カセットID）は、YOLPカセットギャラリー から好きなものを選択して使用します。
今回のサンプルは、Yahoo!ロコ プレイス店舗/施設情報Ver.1 のカセットを使用しています。
2. ローカルサーチAPIで取得した地点データを地図上にプロットする
for (var i = 0, len = result.features.length; i < len; i++ ) { //51行目
var feature = result.features[i];
var marker = new Y.Marker(feature.latlng,{icon:icon});
ymap.addFeature(marker);
}
resultは、ローカルサーチAPIからのレスポンスで、地点の件数分featureを保持しているので、
取得した件数分、処理を繰り返します。
マーカーのインスタンスを生成して、ymap.addFeature(marker)で、地図上にプロットします。
3. マーカーに自作のアイコンを使用する。
var icon = new Y.Icon('/images/h19e_icon.png'); //31行目
var marker = new Y.Marker(feature.latlng,{icon: icon}); //53行目
Y.Iconのインスタンスを生成する際に、自作したアイコンのイメージパスを指定して、
そのインスタンスを、Y.Markerインスタンスの生成時に icon に渡してあげます。
4. 吹き出しを付ける
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>');
marker.bindInfoWindow()に、吹き出しに表示したい文字を渡してあげると、マーカーをクリックした際に、その内容が表示された吹き出しが表示されます。
resultオブジェクトは、firebugを使用して、console.log(result)で中身を確認しながら行うとやりやすいと思います。
5. 地図を移動したときに、検索を行う
ymap.bind('moveend',function(){
var latLng = ymap.getCenter();
search(latLng.lat(),latLng.lng());
var latLng = ymap.getCenter();
search(latLng.lat(),latLng.lng());
});
上記の記述では、地図を移動した後（moveendイベント)、地図の中心の緯度経度を取得し、検索を行います。
このままでは地図を移動するたびに、マーカーが増えてしまうので、 ymap.clearFeatures(); で移動前のマーカーを一旦削除しています。
と、これぐらいのソースコードと時間で周辺検索のサービスを完成させることができました。
参考になれば幸いです。
0 件のコメント:
コメントを投稿