位置情報アプリ (5) – スポットの検索結果を表示する

前項に引き続いて、ロケタッチのスポット検索の結果を表示する。
実行例：xlocclip02.html?start_tab=1

• 検索結果の受け取り

以下のような条件でスポットを検索する。


// JavaScript
$.getJSON(uri,function(data){
    if (data.code == 200){ // 処理成功
        //console.log(data);
        showGridLoctSpotList(data.spots); // グリッドにスポット一覧を表示
        displayLoctSpots(data.spots); // 地図にスポットを表示
    } else { // 処理失敗
        $.messager.alert('Error','Search failed.');
    }
});

結果は以下のようなJSON形式で得られる。

// JSON
{
 "spots": [
  {
   "icon": {
    "large": "http://tou.ch/images/category/086_l.png",
    "small": "http://tou.ch/images/category/086_s.png",
    "medium": "http://tou.ch/images/category/086_m.png"
   },
   "closed": false,
   "link": "http://tou.ch/spot/207758/",
   "distance": "7",
   "lat": "35.710042298369",
   "name": "東京スカイツリー TOKYO SKYTREE",
   "parent_category": "建物・ランドマーク",
   "external_link": "",
   "category_id": "86",
   "category": "タワー",
   "id": "207758",
   "address": "東京都墨田区押上1-1-13",
   "lng": "139.81073830423"
  },

• スポット一覧を左グリッドに表示する

検索結果の一覧を左グリッドに表示する。グリッドはjQuery EasyUIのDataGridで、
・表示する列名を指定
・表示するデータをセット
する。データはオブジェクトの配列で、指定した列だけを表示してくれる。

// JavaScript
function showGridLoctSpotList(spots){
    var colData = [[ // 表示する列を指定する(データのフィールド名と表示名)
        { field: 'name', title: 'Spot Name', width: 220 },
        { field: 'category', title: 'Category', width: 45 }
    ]];
    $('#dgSearchResult').datagrid({
        columns : colData,
        data : spots,
    });
}

dataには経緯度などの情報も含まれているが、columnsで指定した項目だけが表示される。’name’はロケタッチが決めた属性名で、グリッドに表示するする際の列名は、’Spot Name’となる。


• 各スポットを地図に表示する

検索結果の一覧をGoogle Mapsに表示する。ロケタッチのアイコンをマーカーとして使用する。


• スポットの詳細を右グリッドに表示する

「左グリッドで1つのスポットを選択したとき」と「マップで1つのスポットをクリックしたとき」のイベントハンドラを定義し、選ばれたスポットの詳細データを右グリッドに表示する。
DataGridの選択イベントはonSelectなので、以下のようにイベントハンドラを追加する。

// JavaScript
$('#dgSearchResult').datagrid({
  columns : colData,
  data : spots,
    onSelect: function(index, row){ // rowは元データの属性を全て保持するオブジェクト
      showGridLoctSpotItem(row);//スポットの詳細を表示する
      console.log(row.id + ' - ' + row.name);
    }
});

地図マーカーをクリックしたときも同じshowGridLoctSpotItem()を呼び出す。


• 一連の流れのまとめ

スポットを検索し、結果を左右のグリッド・地図に表示した例。