Home » Ajax, Programing » HeartRails Express APIを利用して路線と駅のプルダウンをつくろう

Check     このエントリーをはてなブックマークに追加

路線や駅情報を提供してくれる、HeartRails ExpressのAPIを利用して、路線と駅のプルダウンを作成してみます。

HeartRails ExpressのAPIは、JSONPをサポートしているので、javascriptだけでできてしまいます。

利用するライブラリは、
JQuery

selectタグの操作を楽にしてくれるJQueryのプラグイン

JSONPをサポートしてくれるライブラリjsr_class.js

ダウンロードして、jsファイルをとりだし、下記のように宣言してあげます。
[javascript]



[/javascript]
パスは適宜置き換えてください。

そして、実装コードはこんな感じになります。
[javascript]

[/javascript]

HTMLはシンプルにこんな感じで。(都道府県は省略しました・・・。都道府県の値もAPIから取得できますが。手抜きで。)
[html]


[/html]

サンプルはこちら

これは地図系のサイトでかなり使えそうですね。

Check     このエントリーをはてなブックマークに追加
タグ:
  • ほげらっちょ

    千葉県

    valueの値は日本語より半角英数字の方がよい気が。。。

    ソース参考になります。丸コピで使えそうでいいですね。

  • ほげらっちょ

    千葉県

    valueの値は日本語より半角英数字の方がよい気が。。。

    ソース参考になります。丸コピで使えそうでいいですね。

  • ueda

    >ほげらっちょさん
    APIに渡すのが、日本語なんでそのまま日本語にしてます。

  • ueda

    >ほげらっちょさん
    APIに渡すのが、日本語なんでそのまま日本語にしてます。

  • wadar

    ページを開いた時に初期ですでに値をセットすることは可能でしょうか?

  • http://ueblog.natural-wave.com/ bonnaroo

    もちろんできますよ。
    ページ開いたときにjavascriptのonLoadなどをうまく利用すれば、うまくいくのではないでしょうか。

  • wadar

    返信ありがとうございました。
    JS初心者なものですみますん・・
    生成されたプルダウンの初期選択を変更する方法がわかりませんでした。
    「JS」の一部
    function set_train(){
    if ($(“#pref”).val()){
    var url = 'http://express.heartrails.com/api/json?method=getLines'
    + '&prefecture=千葉県'
    + '&jsonp=PrefCallback';
    prefObj = new JSONscriptRequest( url );
    prefObj.buildScriptTag();
    prefObj.addScriptTag();
    } else {
    $(“#train”).removeOption(/./);
    }

    if ($(“#train”).val()){
    var url = 'http://express.heartrails.com/api/json?method=getStations'
    + '&line=JR内房線'
    + '&jsonp=TrainCallback';
    trainObj = new JSONscriptRequest( url );
    trainObj.buildScriptTag();
    trainObj.addScriptTag();
    } else {
    $(“#station”).removeOption(/./);
    }
    }

    「html」の一部
    <body onLoad=”set_train()”>

    trainの値の設定もわかりませんでした・・
    お忙しいところ大変申し訳ありませんがソースや参考サイトを教えて頂けると助かります。

  • http://ueblog.natural-wave.com/ bonnaroo

    こんな感じはいかがでしょうか。

    <body onLoad=”set_train();”>

    <script type=”text/javascript”>
    function set_train(){
    $('#pref').val('千葉県');
    PrefChange();
    }
    function PrefCallback(json){
    if (!json){ return; }
    if (json.response.line.length == 0) { return; }

    var lines = json.response.line;
    var options = {};
    for (var i = 0; i < lines.length; i++){
    options[lines[i]] = lines[i];
    }
    $(“#train”).removeOption(/./);
    $(“#train”).addOption(options,false);
    prefObj.removeScriptTag();

    $('#train').val('JR京葉線');TrainChange();
    }
    </script>

    直書きしてしまってますが、参考になればと思います。

  • wadar

    ご丁寧な対応ありがとうございました。
    pref train station 共、DBに登録された路線情報から取得したデータを初期値として表示することが出来ました。