以前に都道府県→路線→駅というドリルダウン検索を実装する方法を紹介しましたが、同様にAPIを使って都道府県→市のドリルダウン検索を実装するスクリプトを紹介します。
スクリプトの基本構造はほぼ同じです。
今回はYahoo!の住所ディレクトリAPIを使用しています。
以下のコードでは市(都道府県の1階層下とみなされるエリア・・という解釈でいいでしょうか)までで止めていますが、市の住所コードをAPIに投げると町名まで取得することができます。
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 |
//市町村検索 //初期設定 var area_pref = $('#area_pref'); //都道府県が入るselect var area_city = $('#area_city'); //市町村が入るselect //最初に都道府県を読み込む $.getJSON('http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/addressDirectory?callback=?', { appid: 'あなたのアプリケーションID', ac: 'JP', output: 'json' }, function(json){ area_pref.children().not(':first').remove();//一つ目のoption(選択してください)のみ残して削除 $.each(json.Feature[0].Property.AddressDirectory,function(key,value){ var txt = String(this.Name); var code = String(this.AreaCode); area_pref.append('<option value="'+code+'">'+txt+"</option>"); }); }); //都道府県から市町村を検索 area_pref.on('change',function(){ $.getJSON('http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/addressDirectory?callback=?', { appid: 'あなたのアプリケーションID', ac: area_pref.val(), output: 'json' }, function(json){ area_city.children().not(':first').remove();//一つ目のoption(選択してください)のみ残して削除 $.each(json.Feature[0].Property.AddressDirectory,function(key,value){ var txt = String(this.Name); area_city.append('<option value="'+txt+'">'+txt+"</option>"); }); }); }); |
HTMLで重要なのはselectのID名だけで、ほかはどんなかたちでもかまいません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="module"> <h2>地域から探す</h2> <dl class="table"> <dt>都道府県</dt> <dd> <select id="area_pref"> <option value="">都道府県を選択してください</option> </select> </dd> </dl> <dl class="table"> <dt>市町村</dt> <dd> <select id="area_city"> <option value="">市町村を選択してください</option> </select> </dd> </dl> </div> |
この住所検索と路線検索を組み合わせることで、全国規模のポータルサイト・データベースサイトなどでも楽に検索機能を実装することが可能となります。
いずれもAPIの利用規約を順守してご利用ください。
ADs
ブログを拝見し参考にしようとしたところ、私が今やろうとしていることはYOLPの利用規約に引っかかりそうだったのでお蔵入りとなったのですが、利用規約等の確認をしていた中で以下の記述を見つけました。
”アプリケーションIDは、Yahoo! JAPANのAPIの使用状況を把握し、不正行為を防ぐために使用されます。第三者に開示したり、第三者が参照できる場所に記載しないでください。”
(全文は以下)
http://www.yahoo-help.jp/app/answers/detail/p/537/a_id/43397
実際に公開されているソースを丸ごとコピー&ペーストで見た目上は何の問題もなく動いてしまうため、appidはマスクした方が良いかと思います。
h_gatya_u様
コードを記述してそのままコピペしてしまってました。。。
ご指摘ありがとうございます。