Skip to content

html5_demo_6

Jump to bottom Edit New page
EkispertWebService edited this page Jan 17, 2017 · 2 revisions

WebAPI Document - プラクティス#6

経路表示パーツを追加

今回のプラクティスでは、まず経路表示パーツの設置を行います。
※実際の経路表示は次のプラクティスにて行います。

  1. 経路表示パーツをインクルードします。

     <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCourse.css">
 <script type="text/javascript" src="expGuiCourse.js?key=keycode" charset="UTF-8"></script>

※keycodeにはご契約のアクセスキーを設定してください。

  1. パーツのグローバル変数を追加します。

     var resultApp;// 経路表示パーツ

  2. 初期化用のスクリプトを追加します。

     // 経路表示パーツ初期化
 resultApp = new expGuiCourse(document.getElementById("result"));

  3. HTMLに経路表示パーツを表示するdivタグを追加します。

     <div id="result"></div>

サンプル

<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/expGuiDateTime.css">
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiStation.css">
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCondition.css">
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCourse.css">
    <script type="text/javascript" src="expGuiDateTime.js?key=keycode" charset="UTF-8"></script>
    <script type="text/javascript" src="expGuiStation.js?key=keycode" charset="UTF-8"></script>
    <script type="text/javascript" src="expGuiCondition.js?key=keycode" charset="UTF-8"></script>
    <script type="text/javascript" src="expGuiCourse.js?key=keycode" charset="UTF-8"></script>
    <!-- 初期化スクリプト部分 -->
    <script type="text/javascript">
      <!--
var dateTimeApp;// 日付入力パーツ
var stationApp1;// 駅名入力パーツ#1
var stationApp2;// 駅名入力パーツ#2
var conditonApp;// 探索条件パーツ
var resultApp;// 経路表示パーツ
/*
 * パーツを初期化
 */
function init(){
  // 日付入力パーツ初期化
  dateTimeApp = new expGuiDateTime(document.getElementById("dateTime"));
  dateTimeApp.dispDateTime();
  // 駅名入力パーツ#1初期化
  stationApp1 = new expGuiStation(document.getElementById("station1"));
  stationApp1.dispStation();
  // 駅名入力パーツ#2初期化
  stationApp2 = new expGuiStation(document.getElementById("station2"));
  stationApp2.dispStation();
  // 探索条件パーツ初期化
  conditonApp = new expGuiCondition(document.getElementById("condition"));
  conditonApp.dispCondition();
  // 経路表示パーツ初期化
  resultApp = new expGuiCourse(document.getElementById("result"));
}
// -->
    </script>
  </head>
  <body onLoad="Javascript:init();">
    <!-- パーツ表示部分 -->
    <div id="dateTime"></div>
    出発地
    <div id="station1" style="width:100%;"></div>
    目的地
    <div id="station2" style="width:100%;"></div>
    <div id="condition"></div>
    <div id="result"></div>
  </body>
</html>

次のプラクティスへ

© Val Laboratory Corporation

Add a custom sidebar
Clone this wiki locally