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

経路表示

平均経路探索、ダイヤ探索を行い、経路を表示します。経路はタブにて切り替えが可能で、最大20件の経路表示が行えます。なお、表示する金額を片道・往復・定期券から選択でき、定期券の控除も行えます。

インクルード

<script type="text/javascript" src="expGuiCourse.js?key=keycode"></script>
<link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCourse.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/expGuiCourse.css">
    <script type="text/javascript" src="expGuiCourse.js?key=keycode">
    </script>
    <script type="text/javascript">
      <!--
var resultApp;
/*
 * パーツを初期化
 */
function init(){
  // 経路表示パーツ初期化
  document.getElementById("result").innerHTML="";
  resultApp = new expGuiCourse(document.getElementById("result"));
  resultApp.setConfigure("PriceChange",true);// 変更を許可
  resultApp.setConfigure("PriceChangeRefresh",true);// 再読み込みをオン
  resultApp.setConfigure("AssignDia",true);
  // 探索条件
  var searchWord = "";
  // 発着地リストを作成
  searchWord +="viaList=高円寺:東京";
  searchWord += '&searchType=plain';
  // 探索結果数
  searchWord += '&answerCount='+ String(10);
  searchWord += '&assignDetailRoute=高円寺:ＪＲ総武線:Up:新宿';
  // 探索を実行
  var price = resultApp.PRICE_ONEWAY;
  resultApp.search(searchWord,price,result);
}
/*
 * 探索実行時のコールバック関する
 */
function result(isSuccess){
  if(!isSuccess){
    alert("探索結果が取得できませんでした");
  }
}
// -->
    </script>
  </head>
  <body onLoad="Javascript:init();">
    <div id="result">
    </div>
  </body>
</html>

画面サンプル(PC)

画面サンプル(スマートフォン)

画面サンプル(タブレット)