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

ランドマーク

地点に最寄り駅を設定し、ランドマークとして探索に利用できるようにします。最寄り駅は5つまで設定可能です。
※最寄り駅の重複は不可

インクルード

<script type="text/javascript" src="expGuiLandmark.js?key=keycode"></script>

サンプルコード

<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="expGuiLandmark.js?key=keycode">
    </script>
    <script type="text/javascript" src="expGuiCourse.js?key=keycode">
    </script>
    <script type="text/javascript">
      <!--
var fromLandmark;// ランドマークパーツ
var toLandmark;// ランドマークパーツ
var resultApp;// 経路表示パーツ
/*
 * パーツを初期化
 */
function init(){
  // 地点情報
  fromLandmark = new expGuiLandmark();
  toLandmark = new expGuiLandmark();
  // 経路探索
  resultApp = new expGuiCourse(document.getElementById("course"));
  // 地点情報の取得
  getFromLandmarkData();
}
/*
 * 地点情報の取得
 */
function getFromLandmarkData(){
  // 出発地
  var tmpLandmarkObject = fromLandmark.createLandmarkInterface("株式会社ヴァル研究所");
  // 最寄駅情報
  var tmpStation = fromLandmark.createLandmarkStationInterface("高円寺");
  tmpStation.setTraffic("徒歩");
  tmpStation.setTime(5);
  tmpLandmarkObject.addStation(tmpStation);
  // 地点生成
  fromLandmark.createLandmark(tmpLandmarkObject,setLandmark);
  // 目的地
  var tmpLandmarkObject = toLandmark.createLandmarkInterface("取引先");
  // 最寄駅情報(1)
  var tmpStation1 = toLandmark.createLandmarkStationInterface("新宿");
  tmpStation1.setTraffic("徒歩");
  tmpStation1.setTime(10);
  tmpLandmarkObject.addStation(tmpStation1);
  // 最寄駅情報(2)
  var tmpStation2 = toLandmark.createLandmarkStationInterface("西新宿");
  tmpStation2.setTraffic("徒歩");
  tmpStation2.setTime(3);
  tmpLandmarkObject.addStation(tmpStation2);
  // 地点生成
  toLandmark.createLandmark(tmpLandmarkObject,setLandmark);
}
/*
 * 地点情報生成のコールバック
 */
function setLandmark(isSuccess){
  if(!isSuccess){
    alert("地点情報が取得できませんでした");
  }else{
    // 両方のランドマーク設定が完了していた場合は探索する
    if(typeof fromLandmark.getSerializeData() != 'undefined' && typeof toLandmark.getSerializeData() != 'undefined'){
      search();
    }
  }
}
/*
 * 経路の取得
 */
function search(){
  // 探索条件を設定
  var searchObject = resultApp.createSearchInterface();
  // 発着地を設定
  var from = fromLandmark.getSerializeData();
  var to = toLandmark.getSerializeData();
  searchObject.setViaList(from +":"+ to);
  // 探索実行
  resultApp.search(searchObject,setResult);
}
/*
 * 経路探索のコールバック
 */
function setResult(isSuccess){
  if(!isSuccess){
    alert("探索結果が取得できませんでした");
  }
}
// -->
    </script>
  </head>
  <body onLoad="Javascript:init();">
    <div id="course">
    </div>
  </body>
</html>