前記事に引き続いて、駅データベースを作成を続ける。今回は、位置情報サービス(foursquare/ロケタッチ)と連携する。現時点で、データベースに各駅の経緯度情報を保持しているので、これを使って、自動チェックイン時に必要な位置情報サービスの地点ID(foursquareではvenue id、ロケタッチではスポットID)と紐付ける機能を作成する。
画面は以下のイメージで、前回の画面に「位置情報サービスの地点検索ボタン」「検索結果表示」と、「保存ボタン」を追加した。
- foursquareの地点検索/表示
以前作成したfoursquareの検索サーブレットを呼び出す// function srcSpotFrsq(mode){ // 指定された駅をキーとして検索サーブレット呼び出し searchSpotsFrsqStation(gCurStation, mode, function(spots){ // 結果表示 if (spots){ showSrcSpots(spots, mode); } }); } // foursquareの検索サーブレットを呼び出す function searchSpotsFrsqStation(station, mode, callback){ // mode が'station'の時は駅名を検索パラメータに追加、'all':追加しない // 駅の経緯度は常にパラメータとして使用 // 検索(サーブレット呼び出し)は非同期で実行 // 結果は独自のspot形式 } // 検索ボタンのイベントハンドラ //// 検索結果を地図・グリッドに表示する。frsq/loct共通のヘルパー関数 function showSrcSpots(spots, mode){ // 地点としての駅を検索時は、結果に「駅」という文字を含むものだけを抽出 if (mode == 'station'){ spots = spots.filter(function(item, index){ if ((item.name).indexOf(gCurStation.station_name + '駅') != -1) return true; }); } displayLoctSpots(spots); // 結果をマーカーにして地図に表示 setDgdSrcSpots(spots); // 結果をデータグリッドに表示 }
- ロケタッチの地点検索/表示
ロケタッチの地点検索は、ブラウザからロケタッチのサーバに直接リクエストを発行する。検索パラメータとして経緯度・結果の最大数を指定し、さらに駅を検索する場合は、駅名もパラメータに追加する。また異なるドメインへのリクエストになるので、JSONP方式による。(以下のサンプルの callback=? の部分。)https://api.loctouch.com/v1/spots/search?lat=41.990692&lng=140.700333&limit=30&callback=?
それ以外はfoursquare とほぼ同じ。
- 検索結果を保存する
保存ボタンがクリックされたら、駅データの地点IDプロパティ(foursquare/ロケタッチのそれぞれに定義)に、検索して得られたvenue ID、スポットIDを保存する。// JavaScript $('.btnSaveSpot').live('click', function(){ // datagrid上で選択されているスポットを取得する //// 複数行選択不可なので最初の選択行でOK var cur_spot = $('#dgdSrcSpots').datagrid('getSelected'); if (cur_spot == null){ // 選択されていない場合はメッセージを表示し戻る xumiscMessage('No spot selected.'); return; } // どのボタンがクリックされたかを判別する var btn_id = $(this).attr('id'); console.debug($(this).attr('id')); // 選択されているスポットがfoursquareかロケタッチかを判別する var spot_type = checkSpotType(cur_spot.id); switch (btn_id){ case 'btnSaveSpot': // サービスによって対応するプロパティにスポットIDをセットする if (spot_type == 'loct'){ gCurStation.loc_loct =cur_spot.id; } else { gCurStation.loc_frsq =cur_spot.id; } // データストアを更新する gDSrwStation.dbUpd(gCurStation.station_cd, gCurStation, function(){ xumiscMessage('Updated. ' + gCurStation.station_name + ':' + spot_type + ' spot_id = ' + cur_spot.id); }); break; case 'btnSaveSpotE': xumiscMessage('Not implemented.'); break; } });
- 実行例