今回は、前回のYahoo! UIのツリーとGoogle Maps を利用した地図に、
じゃらん Web サービスの
じゃらんWebサービス 宿表示APIからデータを受信してマッシュアップしてみました。ドラッグやフェイドなどのエフェクトは
今回は、自作の
ドラッガブルフロートなDIVを
少し加工し利用しています。でも、jsgt.org経由でじゃらんまで取りに行きますから、少し重いので、キャッシュやミラーの仕組みを挿入した方が良いかもしれません。相手が停止している可能性もありますし。
また、このサンプルでは、経緯度情報が無い場合の例外処理なども行っていませんので表示エリアがおかしくなる場合が結構あります。
|
JavaScript++かも日記 |
【XML】 今回は、じゃらんのXMLデータから北海道分だけを取り出してサンプル化しました。
これを内部で、右のようなツリー用JSONへ加工して使っています。→
(最初からJSONで用意すればデータサイズは約半分になり、この加工処理も不要になります。)
<?xml version="1.0" encoding="UTF-8"?>
<Area>
<Prefecture cd="010000" name="北海道">
<LargeArea cd="010200" name="札幌">
<SmallArea cd="010202" name="ススキノ・大通り"/>
<SmallArea cd="010205" name="北大・丘珠"/>
<SmallArea cd="010208" name="琴似・テイネ"/>
<SmallArea cd="010211" name="厚別・白石・豊平"/>
<SmallArea cd="010214" name="真駒内"/>
</LargeArea>
<LargeArea cd="010300" name="定山渓">
<SmallArea cd="010302" name="定山渓"/>
</LargeArea>
<LargeArea cd="010500" name="小樽・キロロ・積丹">
<SmallArea cd="010502" name="小樽"/>
<SmallArea cd="010505" name="余市・キロロ"/>
<SmallArea cd="010508" name="積丹"/>
</LargeArea><LargeArea cd="010800" name="ニセコ・ルスツ">
<SmallArea cd="010802" name="ニセコ・倶知安"/>
<SmallArea cd="010805" name="ルスツ"/>
</LargeArea><LargeArea cd="011100" name="洞爺・登別・苫小牧">
<SmallArea cd="011102" name="苫小牧"/>
<SmallArea cd="011105" name="登別・室蘭"/>
<SmallArea cd="011108" name="洞爺"/>
</LargeArea><LargeArea cd="011400" name="函館・大沼・松前">
<SmallArea cd="011402" name="函館・湯の川"/>
<SmallArea cd="011405" name="大沼・長万部・江差"/>
<SmallArea cd="011408" name="松前"/>
</LargeArea><LargeArea cd="011700" name="稚内・留萌">
<SmallArea cd="011702" name="稚内"/>
<SmallArea cd="011705" name="羽幌"/>
<SmallArea cd="011708" name="留萌・増毛"/>
</LargeArea>
<LargeArea cd="012000" name="旭川・層雲峡">
<SmallArea cd="012002" name="名寄"/>
<SmallArea cd="012005" name="旭川"/>
<SmallArea cd="012011" name="層雲峡・天人峡"/>
</LargeArea>
<LargeArea cd="012100" name="富良野・美瑛・トマム">
<SmallArea cd="012102" name="美瑛"/>
<SmallArea cd="012105" name="富良野"/>
<SmallArea cd="012108" name="トマム"/>
</LargeArea>
<LargeArea cd="012300" name="網走・知床">
<SmallArea cd="012302" name="サロマ・紋別"/>
<SmallArea cd="012305" name="網走・北見"/>
<SmallArea cd="012308" name="斜里・羅臼"/>
</LargeArea>
<LargeArea cd="012600" name="釧路・阿寒・根室・川湯・屈斜路">
<SmallArea cd="012602" name="釧路・阿寒"/>
<SmallArea cd="012605" name="川湯・屈斜路"/>
<SmallArea cd="012608" name="根室"/>
</LargeArea>
<LargeArea cd="012900" name="石狩・空知・千歳">
<SmallArea cd="012902" name="深川・滝川"/>
<SmallArea cd="012905" name="石狩"/>
<SmallArea cd="012908" name="夕張・岩見沢"/>
<SmallArea cd="012911" name="支笏湖・千歳"/>
</LargeArea>
<LargeArea cd="013200" name="帯広・十勝">
<SmallArea cd="013202" name="帯広・十勝川"/>
<SmallArea cd="013205" name="十勝・サホロ"/>
</LargeArea>
<LargeArea cd="013300" name="日高・えりも">
<SmallArea cd="013302" name="日高・えりも"/>
</LargeArea>
<LargeArea cd="013500" name="離島">
<SmallArea cd="013502" name="利尻・礼文"/>
<SmallArea cd="013505" name="天売・焼尻"/>
<SmallArea cd="013508" name="奥尻"/>
</LargeArea>
</Prefecture>
</Area>
