楽天トラベル空室検索APIに位置情報を動的に指定して叩く

前回の記事「MAに向けてTwilioと楽天トラベル空室検索APIを使ってアプリを作りたい」の3回目(http://qiita.com/fumishitan/items/6b9944ed9d4daec6a3a8)

今度はmonacaで位置情報を取得し、その情報を使い動的に楽天トラベル空室検索APIを叩く位置情報を取得する方法は下記のサイトを参考にした

「Monacaでチェックインアプリを作成する」
http://mb.cloud.nifty.com/doc/current/tutorial/monaca_checkIn.html

ちなみにプロジェクトは下記のGithubのページ掲載されている
https://github.com/NIFTYCloud-mbaas/LocationDemo
monacaでは下記のようなコードを書けば良い

var current;
navigator.geolocation.getCurrentPosition(onSuccess, onError, option);
var lat = current.geopoint.latitude;
var lng = current.geopoint.longitude;

monacaのドキュメントに書かれている
http://docs.monaca.mobi/cur/ja/reference/phonegap_34/ja/geolocation/

onSuccess, onError, optionの３つはいかのように作る

//位置情報取得に成功した場合のコールバック
var onSuccess = function(position){
    current = new CurrentPoint();
    current.distance = CurrentPoint.distance;   //検索範囲の半径を保持する    
    current.geopoint = position.coords;         //位置情報を保存する
    //search(current);
};

//位置情報取得に失敗した場合のコールバック
var onError = function(error){
    console.log("現在位置を取得できませんでした");
};

//位置情報取得時に設定するオプション
var option = {
    timeout: 6000   //タイムアウト値(ミリ秒)
};

//現在地を保持するクラスを作成
function CurrentPoint(){
    geopoint=null;  //端末の位置情報を保持する
    distance=0;     //位置情報検索に利用するための検索距離を指定する
}

これを昨日のコードapp.jsに合わせるといかのようになる

app.js

var xhr = new XMLHttpRequest();
var current;
function rakutenTravelApi(){

    navigator.geolocation.getCurrentPosition(onSuccess, onError, option);
    var lat = current.geopoint.latitude;
    var lng = current.geopoint.longitude;

    var rakutentravelApi = "https://app.rakuten.co.jp/services/api/Travel/VacantHotelSearch/20131024";
    var rakutentravelKey ="************";
    var RANGE = 3;
    var datumType = 1;
    var checkInDate = new Date();
    var checkOutDate = checkInDate;

    checkOutDate.setDate(checkOutDate.getDate() + 1);
    var queri = rakutentravelApi + "?applicationId=" + rakutentravelKey + "&checkinDate=" + checkInDate.toISOString().substring(0,10) + "&checkoutDate=" + checkOutDate.toISOString().substring(0,10) + "&latitude=" + lat + "&longitude=" + lng + "&searchRadius=" + RANGE + "&datumType=" + datumType;
    console.log(queri);
    // XMLHttpRequest オブジェクトを作成
   xhr.open("GET",queri,true);
   xhr.onreadystatechange = processResponse;
   xhr.send();
}

//位置情報取得に成功した場合のコールバック
var onSuccess = function(position){
    current = new CurrentPoint();
    current.distance = CurrentPoint.distance;   //検索範囲の半径を保持する    
    current.geopoint = position.coords;         //位置情報を保存する
    //search(current);
};

//位置情報取得に失敗した場合のコールバック
var onError = function(error){
    console.log("現在位置を取得できませんでした");
};

//位置情報取得時に設定するオプション
var option = {
    timeout: 6000   //タイムアウト値(ミリ秒)
};

//現在地を保持するクラスを作成
function CurrentPoint(){
    geopoint=null;  //端末の位置情報を保持する
    distance=0;     //位置情報検索に利用するための検索距離を指定する
}

function processResponse() {
    if(xhr.readyState == 4) {
        if(xhr.status == 200 || xhr.status == 201) {
            // リクエストの処理
            var rakutentravel = JSON.parse(xhr.responseText);
             for(var i in rakutentravel.hotels){
                var hotelName = JSON.stringify(rakutentravel.hotels[i].hotel[0].hotelBasicInfo["hotelName"]);
                var hotelInfoUrl = JSON.stringify(rakutentravel.hotels[i].hotel[0].hotelBasicInfo["hotelInformationUrl"]);
                var clickInput = "search-button" + i;
                $("#hotel-list").append("<li>" + "<p><h3>" + hotelName + "</h3><h4>" + hotelInfoUrl + "</h4>"); 
                $("#hotel-list").append("<h4>"+ "<input id=" + clickInput + " " + "type=" + "'button'" + "value=" + "'reserve'" +"></h4>");
                $("#hotel-list").append("</p>" );
                $("#hotel-list").append("</li>" );
                $("#hotel-list").listview('refresh');

            }

        } else {
            // エラー処理

        }
    }
}

ということで今日は以上！
JSONの処理も書きたい！