WebAPI Document - GUIソリューション - チュートリアル

定期券の払戻金額が計算出来ます。 なお、区間ごとに定期券の分割や、経路変更による旬割払戻し等の設定が行えます。

インクルード

<script type="text/javascript" src="expGuiRepayment.js?key=keycode"></script>
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiRepayment.css">

サンプルコード

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <title>
    Webサービスサンプル
    </title>
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiRepayment.css">
    <script type="text/javascript" src="expGuiRepayment.js?key=keycode">
    </script>
    <script type="text/javascript" src="expGuiCourse.js?key=keycode">
    </script>
    <script type="text/javascript">
      <!--
var repayment;// 定期払い戻しパーツ
var resultApp;// 経路表示パーツ
/*
 * パーツを初期化
 */
function init(){
  // 払い戻し計算
  repayment = new expGuiRepayment(document.getElementById("repayment"));
  // 計算用の経路探索
  resultApp = new expGuiCourse(document.getElementById("teikiResult"));
  // 探索条件を設定
  var searchObject = resultApp.createSearchInterface();
  // 発着地を設定
  searchObject.setViaList('高円寺:銀座');
  // 探索種別を平均に設定
  searchObject.setSearchType(resultApp.SEARCHTYPE_PLAIN);
  // ソート順を定期に変更
  searchObject.setSort(resultApp.SORT_TEIKI);
  resultApp.search(searchObject,setResult);
}
/*
 * 経路探索のコールバック
 */
function setResult(isSuccess){
  if(!isSuccess){
    alert("探索結果が取得できませんでした");
  }else{
    // 探索結果が取得できているかを確認
    if(resultApp.getResultCount() >= 1){
      // シリアライズデータのセット
      calc(resultApp.getSerializeData());
    }
  }
}
/*
 * 払い戻し計算開始
 */
function calc(serializeData){
  // インターフェースを作成
  var tmpRepayment = repayment.createRepaymentInterface();
  // シリアライズ
  tmpRepayment.setSerializeData(serializeData);
  // 開始日
  tmpRepayment.setStartDate("20130901");
  // 払戻日
  tmpRepayment.setRepaymentDate("20130915");
  // 有効期間
    tmpRepayment.setValidityPeriod(repayment.TEIKI6);
  // 区間変更
   tmpRepayment.setChangeSection(true);
  repayment.dispRepayment(tmpRepayment);
}
// -->
    </script>
  </head>
  <body onLoad="Javascript:init();">
    <div id="repayment">
    </div>
    <!-- 経路特定用経路表示パーツ -->
    <div id="teikiResult" style="display:none;">
    </div>
  </body>
</html>

画面サンプル(PC)
img/repay_p1.png
img/repay_p2.png
img/repay_p3.png

画面サンプル(スマートフォン)
img/repay_s1.png

画面サンプル(タブレット)
img/repay_t1.png
img/repay_t2.png
img/repay_t3.png

チュートリアルへ戻る
Val Laboratory