駅データベース(2) – 位置情報サービスと連携

前記事に引き続いて、駅データベースを作成を続ける。今回は、位置情報サービス(foursquare/ロケタッチ)と連携する。現時点で、データベースに各駅の経緯度情報を保持しているので、これを使って、自動チェックイン時に必要な位置情報サービスの地点ID(foursquareではvenue id、ロケタッチではスポットID)と紐付ける機能を作成する。

画面は以下のイメージで、前回の画面に「位置情報サービスの地点検索ボタン」「検索結果表示」と、「保存ボタン」を追加した。
xttrw02_a01

  • 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;
      }
    });
    
  • 実行例
    xttrw02_a02
カテゴリー: Development タグ: パーマリンク