【Javascript】【API/マッシュアップ】路線→駅名のドリルダウン検索をAPIを使って最速で実装する方法 | Wood-Roots:blog

2013
01/06

路線→駅名のドリルダウン検索をAPIを使って最速で実装する方法

全国を対象とした店舗データベースや不動産情報サイトなどで使うことがあると思うのですが、「都道府県を選択」→「路線を選択」→「駅名を選択」というドリルダウン検索をAPIを使って簡単に実装する方法をご紹介します。

DEMOを見ると分かりやすいですが、都道府県をセレクトメニューから選ぶとその都道府県内の路線が自動で選べるようになり、さらに路線を選ぶとその路線内の駅が選べるようになります。

DEMO

この検索機能はHeartRails Expressが提供しているAPIを使用したものです。都道府県の取得（これはベタに書いてもいいような気がしますが・・・）から都道府県内の路線の取得、その路線に属する駅名の取得まで行うことができます。
路線から駅名を検索するAPIはロケタッチや駅データ.jpがありますが、都道府県から路線を取得できるAPIはHeartRails Express以外に見つからなかったので、全国を対象としたポータルサイトや情報サイトの構築の際に活用できるのではないでしょうか。

各情報の取得はXMLかJSON(P)で行うことができますが、以下の例はJSONPによる取得例です。
ちょっとしたポイントですが、路線から駅名を取得する際に指定都道府県以外の駅名が含まれているケースがあります（東海道本線などの長い路線）。駅を取得する際に属する都道府県など駅名以外の情報が取得できますので、いったんif文で絞込みをすると選択した都道府県のみの駅名を取得することが出来ます。

jQueryを使用しているのでロードを忘れないようにしてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
(function($){
$(function(){
//初期設定
var pref = $('#pref'); //都道府県が入るselect
var line = $('#line'); //路線が入るselect
var station = $('#station'); //駅名が入るselect
//最初に都道府県を読み込む
$.getJSON('http://express.heartrails.com/api/json?method=getPrefectures&callback=?',function(json){
$.each(json.response.prefecture,function(key,value){
var txt = String(this); //都道府県名が配列で帰ってきてたので文字列に変換・・・
pref.append('<option value="'+txt+'">'+txt+"</option>");
});
});
//都道府県から路線を検索
pref.on('change',function(){
$.getJSON('http://express.heartrails.com/api/json?method=getLines&callback=?',
{prefecture:pref.val()},
function(json){
line.children().not(':first').remove();//一つ目のoption(選択してください）のみ残して削除
station.children().not(':first').remove();//都道府県が変わるときに駅選択も初期化する
$.each(json.response.line,function(key,value){
var txt = String(this);
line.append('<option value="'+txt+'">'+txt+"</option>");
});
});
});
//路線から駅名を検索
line.on('change',function(){
$.getJSON('http://express.heartrails.com/api/json?method=getStations&callback=?',
{line:line.val()},
function(json){
station.children().not(':first').remove();//一つ目のoption(選択してください）のみ残して削除
$.each(json.response.station,function(key,value){
if(this.prefecture == pref.val()){ //路線内の駅のうち選択された都道府県内のものだけを絞り込み
var txt = String(this.name); //駅名の場合郵便番号や経度緯度などが配列として入っているので名称のみ絞り込み
station.append('<option value="'+txt+'駅">'+txt+"駅</option>");//○○「駅」が入ってないので無理やり付ける
}
});
});
});
 
 
});
})(jQuery);

HTMLはselectのIDさえ間違えなければ特に難しい点はありません。
選択項目はすべてAPIより取得してoptionを追加しているだけです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table>
<tr>
<th>都道府県名</th>
<td>
<select id="pref">
<option value="">都道府県を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>路線名</th>
<td>
<select id="line">
<option value="">路線を選択してください</option>
</select>
</td>
</tr>
<tr>
<th>駅名</th>
<td>
<select id="station">
<option value="">駅を選択してください</option>
</select>
</td>
</tr>
</table>

なお、リクエスト回数の制限（サイト内では記述を見つけられませんでしたが、ある程度以上になるとエラーを返されると思われます）や、クレジットの記載義務などがありますのでご利用の際は利用規約を確認してください。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social