路線図ASP -チュートリアル-

路線図ＡＳＰのご利用にあたり

路線図ＡＳＰの利用時には認証キーが必要になります。認証キーはサービス契約時に弊社より送付されます。

また、路線図ＡＳＰの利用には、弊社ＡＳＰサーバーから、ＪａｖａＳｃｒｉｐｔをインクルードする必要があります。インクルードは下記使用例を参考に記述してください。

<script type="text/javascript" src="http://xx.xx.xx/expapi/expmapinclude?key=keycode"></script>

※ xx.xx.xx 部分には、登録して頂いたドメインを記述します。 keycode の部分には、弊社発行のキーコードを記述します。

対象ブラウザ

路線図ＡＳＰは以下の環境で動作チェックを行っています。

ＯＳ	種類
ウィンドウズ	IE7以降、FireFox3.5以降
マッキントッシュ	Safari5以降、FireFox3.5以降

※ Windows8 ModernUI上で動作するIE10に関しては動作保証外となります。

1.2. 基本機能

基本的な使用例

路線図の表示

この例ではウィンドウサイズに合わせて路線図が表示されます。この時点でドラッグによるスクロール、矢印キーによるスクロール、ダブルクリックによる中心位置指定、ウィンドウリサイズ時のサイズ変更に対応しています。

例）全域400％（jpnx4）の地図を東京（22828）を中心にして表示

<head>
<script type="text/javascript" src="http://xx.xx.xx/expapi/expmapinclude?key=keycode"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
<!--//
if (isAuthenticated()){
    if (isSupportedBrowser()){
        // 路線図表示処理
        var mapApp = new CMapApp(document.getElementById("map"));
        mapApp.dispMapStation(22828, "jpnx4");
    } else {
        // エラー処理
        alert("お使いのブラウザはサポートされておりません");
    }
} else {
    // エラー処理
    alert("認証失敗");
}
//-->
</script>
</body>

路線図表示サンプル (basic.html)

イベントを設定する

CMapApp.setAreaEvent()路線図上の駅で取得したいイベントを設定します。イベントは複数設定することができます。デフォルトはEVENT_CLICKが設定されています。

例）クリックと右クリックイベントを設定

var app = new CMapApp(document.getElementById("map"));
app.setAreaEvent(CMapApp.EVENT_CLICK | CMapApp.EVENT_MOUSE_RIGHT_BUTTON);
app.dispMapStation(22828, "jpnx4", onDispMapStation, onStationClick);

function onDispMapStation(isSuccess, stCode) {
    if (!isSuccess) {
        alert("CMapApp.dispMapStation() ERROR!");
    }
}

function onStationClick(name, code, lati, longi,todofukenCode,eventType) {
    if(eventType == CMapApp.EVENT_CLICK) {
        alert("CLICK!");
    } else if(eventType == CMapApp.EVENT_MOUSE_RIGHT_BUTTON) {
    alert("RIGHT_CLICK!");
    }
}

イベント設定サンプル (event.html)

駅クリックイベントの処理

CMapApp.dispMapStation() メソッドの第４引数にコールバック関数を指定することでクリックされた駅の情報が取得できます。なお、この関数は駅名、駅コード、緯度（Arrayオブジェクト）、経度（Arrayオブジェクト）、都道府県種別、イベント種別の６つの引数を受け取ることができます。

例）駅をクリックするとダイアログを表示

var app = new CMapApp(document.getElementById("map"));
app.dispMapStation(22828, "jpnx4", onDispMapStation, onStationClick);

function onDispMapStation(isSuccess, stCode) {
    if (!isSuccess) {
        alert("CMapApp.dispMapStation() ERROR!");
    }
}

function onStationClick(name, code, lati, longi,todofukenCode,eventType) {
    if(eventType == CMapApp.EVENT_CLICK) {
        var msg = "駅名 ： " + name + "\n";
        msg = msg + "駅コード ： " + code + "\n";
        msg = msg + "緯度 ： " + lati[0] + "'" + lati[1] + "'" + lati[2] + "." + lati[3] + "\n";
        msg = msg + "経度 ： " + longi[0] + "'" + longi[1] + "'" + longi[2] + "." + longi[3] + "\n";
        msg = msg + "都道府県コード ： " + todofukenCode + "\n";
        alert(msg);
}
}

駅クリックサンプル (click.html)

テーブルのセルに路線図を表示

例）コンテナ（HTMLDivElement）がテーブルの中にある場合は、テーブルのサイズに合わせて路線図の表示サイズも調整される

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"/>
    <title>基本的な使用例 - テーブルのセルの中に路線図を表示させる</title>
    <script type="text/javascript" src="http://xx.xx.xx.xx/expapi/expmapinclude?key=xxx"></script>
    <script type="text/javascript">
    function onLoad() {
        var app = new CMapApp(document.getElementById("map"));
        app.dispMapStation(25853, "osaka");
    }
    </script>
  </head>
  <body onload="onLoad()">
    <table cellspacing="8" cellpadding="6" border="10" width="100%" height="100%">
      <tbody>
        <tr>
          <td bgcolor="#ff0000" width="100%" height="100%" ><div id="map"></div></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

サイズ調整サンプル (table.html)

より強力な使用例

アプリケーションの実例

路線図の切り替え
路線図の中心位置の変更
選択された駅情報の取得
イメージボタンによるスクロール

以下は上記のような機能を満たしたデモンストレーションプログラムです。アプリケーション作成時の参考にご利用ください。

デモ (powerful.html)

1.3. マーカー表示機能（※拡張1）

マーカー表示機能の使用例

バルーンの表示（CBalloon）

例）東京駅（22828）に "ここは東京駅です" というバルーンを表示

var app;
var balloon;

function onLoad() {
    app = new CMapApp(document.getElementById("map"));
    app.dispMapStation(22828, "jpnx4", onDispMapStation);
}

function onDispMapStation(isSuccess, stCode) {
    if (isSuccess) {
        // 320x240ピクセルのバルーンオブジェクトを生成する
        balloon = app.createBalloon(320, 240, "ここは東京駅です");
        // 東京駅にバルーンを表示する
        balloon.showOnStation(stCode);
    }
}

バルーン表示サンプル (balloon.html)

路線図上への画像貼り付け（CImage）

例）東京駅のそばに家のアイコンを貼り付ける

var app;
var image;

function onLoad() {
    app = new CMapApp(document.getElementById("map"));
    app.dispMapStation(22828, "jpnx4", onDispMapStation);
}

function onDispMapStation(isSuccess, stCode) {
    if (isSuccess) {
        // イメージのURL、ALT、TITLE 属性を指定してオブジェクトを生成する
        image = app.createImage("image/image/house.gif", "いえ", "ハウス");
        // 東京駅のそばに家の画像を貼り付ける
        image.showOnStation(stCode, 0, 0);
    }
}

画像表示サンプル (image.html)

駅を選択状態にする（CMark）

例）東京駅の名称とマークを赤枠で囲む

var app;
var mark;

function onLoad() {
    app = new CMapApp(document.getElementById("map"));
    app.dispMapStation(22828, "jpnx4", onDispMapStation);
}

function onDispMapStation(isSuccess, stCode) {
    if (isSuccess) {
        // オブジェクトを生成する
        mark = app.createMark();
        // 東京駅を駅と駅名の両方をマーキング（STYLE_STATION_ALL）して選択状態にする
        mark.showOnStation(stCode, CMark.STYLE_STATION_ALL);
    }
}

マーカー表示サンプル (mark.html)

1.4. 駅すぱあとの機能（※拡張2）

var expApp = new CExpApp();

expApp.getStationFromCode(22828,resultStation);

function resultStation(station,errorCode) {
    if(errorCode == CExpApp.SUCCESS) {
        alert(station.getName());
    } else {
        alert("エラー");
    }
}

駅情報取得サンプル (station1.html)

例2）東京（22828）の駅名称から駅情報を取得

var expApp = new CExpApp();

expApp.getStationFromName("東京",resultStation);

function resultStation(station,errorCode) {
    if(errorCode == CExpApp.SUCCESS) {
        alert(station.getCode());
    } else {
        alert("エラー");
    }
}

駅情報取得サンプル (station2.html)

駅リストの取得

駅名称の一部から候補駅リストを取得できます。
候補駅リストCExpStationの配列です。

例）文字列「とうきょう」から駅リストを取得

var expApp = new CExpApp();

expApp.getStationList("とうきょう",resultStationList);

function resultStationList(stationList,errorCode) {
    if(errorCode == CExpApp.SUCCESS) {
        alert("候補駅数：" + stationList.length);
        for (var i = 0; i < stationList.length;i++) {
            alert("候補駅：" + stationList[i].getName());
        }
    } else {
        alert("エラー");
    }
}

駅リスト取得サンプル (stationList.html)

範囲探索

駅を基点にして指定範囲内の駅を取得します。範囲は時間又は距離で指定できます。

例）東京（22828）を基点に１０km以上、１５km以内の駅を取得

var expApp = new CExpApp();

expApp.rangeSearchFromDistance(22828,10,15,resultRange);

function resultRange(stationList,errorCode) {
    if(errorCode == CExpApp.SUCCESS) {
        alert("駅数：" + stationList.length);
        for (var i = 0; i < stationList.length;i++) {
            alert("駅：" + stationList[i].getName());
        }
    } else {
        alert("エラー");
    }
}

範囲探索サンプル (rangeSearch.html)

会社リストの取得

地域を指定して会社名称リストを取得します。地域の指定には地域種別を利用します。

例）関東の会社リストを取得

var expApp = new CExpApp();

expApp.getCorpList(CExpApp.AREA_KANTO,resultCorp);

function resultCorp(corpList,errorCode) {
    if(errorCode == CExpApp.SUCCESS) {
        alert("会社数：" + corpList.length);
        for (var i = 0; i < corpList.length;i++) {
            alert("会社：" + corpList[i]);
        }
    } else {
        alert("エラー");
    }
}

会社リスト取得サンプル (corpList.html)

路線リストの取得

地域と会社名称を指定して路線リストを取得します。地域の指定には地域種別を利用します。

例）関東、ＪＲの路線リストを取得

var expApp = new CExpApp();

expApp.getLineList(CExpApp.AREA_KANTO,"ＪＲ",resultLine);

function resultLine(lineList,errorCode) {
    if(errorCode == CExpApp.SUCCESS) {
        alert("路線数：" + lineList.length);
        for (var i = 0; i < lineList.length;i++) {
            alert("路線：" + lineList[i]);
        }
    } else {
        alert("エラー");
    }
}

路線リスト取得サンプル (lineList.html)

路線のトレース

路線名称を指定して路線図上のトレースを生成します。取得した情報をもとに路線図上の駅をマークすることもできます。

例）ＪＲ新幹線のぞみの路線図「全域（400％）」上での停車駅をトレース

var expApp = new CExpApp();

expApp.searchTraceLine("ＪＲ新幹線のぞみ",resultTrace,"jpnx4",true);

function resultTrace(stationList,errorCode) {
    if(errorCode == CExpApp.SUCCESS) {
        alert("駅数：" + stationList.length);
        for (var i = 0; i < stationList.length;i++) {
            alert("駅：" + stationList[i].getName());
        }
    } else {
        alert("エラー");
    }
}

路線トレースサンプル (searchTraceLine.html)