More Related Content
Similar to 尝翱顿チャレンジデー オープンデータを利用したサンプルアプリ (20)
PPTX
20160120 gpsロガーアプリを作ろう史識 川原?
More from Monaca (20)
PPTX
クロスプラットフォーム开発を可能にする惭辞苍补肠补Monaca?
PPTX
展示会出展を成功させるたった一つのことMonaca?
PPTX
クロスフ?ラットフォーム开発を可能にする惭辞苍补肠补とそのセキュリティ対策Monaca?
PPTX
尝罢「料金プラン改定后の惭辞苍补肠补について」Monaca?
PDF
クロスフ?ラットフォーム活用のホ?イントMonaca?
PDF
New things about Cordova 4.0Monaca?
PDF
Cordova and PhoneGap InsightsMonaca?
PDF
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会Monaca?
PDF
はやわかり贬罢惭尝5ハイブリッドアプリ开発事情 Monaca?
PDF
Using PhoneGap to develop incredible HTML5 hybrid mobile appsMonaca?
PDF
How to make Twitter app with PhoneGap/CordovaMonaca?
PDF
HTML5ハイブリッド アプリ開発の実践?開発現場ですぐに活かせるコツを伝授?Monaca?
PPTX
高い鲍齿をハイブリッド开発で実现するためのポイントMonaca?
PDF
第6回尝翱顿チャレンジデー 惭辞苍补肠补绍介资料Monaca?
PDF
Android Bazaar Conference講演資料「Onsen UIデビュー！」Monaca?
PPTX
惭辞苍补肠补で简単スマートフォンアプリ开発体験讲座Monaca?
PPTX
Phone gap＋javascriptスマホアプリ開発（入門編）Monaca?
PDF
HTML5ハイブリッド アプリ開発実践編Monaca?
PPTX
ハイフ?リット?アフ?リ开発最前线から见た贬迟尘濒5の理想と现実Monaca?
Recently uploaded (13)
PDF
安尾 萌, 藤代 裕之, 松下 光範. 協調的情報トリアージにおけるコミュニケーションの影響についての検討, 第11回データ工学と情報マネジメントに関する...Matsushita Laboratory?
PDF
安尾 萌, 北村 茂生, 松下 光範. 災害発生時における被害状況把握を目的とした情報共有システムの基礎検討, 電子情報通信学会HCGシンポジウム2018...Matsushita Laboratory?
PDF
論文紹介：AutoPrompt: Eliciting Knowledge from Language Models with Automatically ...Toru Tamaki?
PDF
SIG-AUDIO 2025 Vol.02 オンラインセミナー 「GDC2025 オーディオ報告会」SIG-Audio_GDC2025_報告会資料_渡辺さ...IGDA Japan SIG-Audio?
PDF
マルチAIエージェントの産業界での実践に向けたオープンソース活動の展望 - Japan Regional User Group (RUG) Meet-UpKosaku Kimura?
PDF
SIG-AUDIO 2025 Vol.02 オンラインセミナー 「GDC2025 オーディオ報告会」SIG-Audio_GDC2024_報告会資料_増野さ...IGDA Japan SIG-Audio?
PDF
論文紹介：Unbiasing through Textual Descriptions: Mitigating Representation Bias i...Toru Tamaki?
尝翱顿チャレンジデー オープンデータを利用したサンプルアプリ
- 19. 地図を表示する
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
① 鯖江市の中心地の緯度と経度を
// 鯖江市の地図を表示する
指定
function createMap() {
// 鯖江市の緯度経度を元に位置情報オブジェクトを作成する
var latlng=new google.maps.LatLng(35.961555,136.184474);
// 地図のオプション
var mapOption = {
zoom: 14,
// ズームレベル
center:latlng, // 中心地を設定
mapTypeId: google.maps.MapTypeId.ROADMAP // 地図のタイプ
};
// 地図を表示するdiv要素とオプションを引数として、mapオブジェクトを作成
map = new google.maps.Map($("#map_canvas").get(0), mapOption);
// 情報ウィンドウ（吹き出し）を１つ作成しておく
infoWindow = new google.maps.InfoWindow();
}
② 鯖江市の地図をGoogleのサーバー
から取得し、div要素内に表示
URL : http://www.asial.co.jp/ │ Copyright ? 2013 Asial Corporation. All Rights Reserved.
｜
19
- 23. 鯖江市のトイレ情報を取得する
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// オープンデータとして提供されているトイレ情報を取得する
function getToiletInfo() {
① 鯖江市のオープンデータ
// 鯖江市のトイレ情報（XML）を取得
$.ajax({
url: "http://www3.city.sabae.fukui.jp/xml/toilet/toiletinformation.xml",
dataType: "xml"
})
② 取得したデータ
.done(function(xml) {
// XMLの中からトイレ情報群を取得
var toilets = $(xml).find("toiletinformation");
// 各トイレ1件1件にマーカーを設定
toilets.each(function(){
createMarker($(this));
});
}
③ XMLデータを$()で囲むと、jQueryのメソッド群が
利用できるようになる。findメソッドで<dataroot>要
素内の<toiletinformation>要素を取得している
})
.fail(function() {
④ eachメソッドは、複数の
alert("情報の取得に失敗しました");
<toiletinformation>要素に対して１件ずつ処理
});
をする。$(this)は、現在処理中の１件分の要素
を表す。
URL : http://www.asial.co.jp/ │ Copyright ? 2013 Asial Corporation. All Rights Reserved.
｜
23
- 24. トイレがある場所にマーカーを表示する
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
86
87
88
89
90
// 各トイレのマーカーを作成する
function createMarker($toilet){
// トイレ情報に含まれる緯度経度を元に位置情報オブジェクトを作成
var latitude = $toilet.find("latitude").text();
① <toiletinformation>の子要素か
var longitude = $toilet.find("longitude").text();
ら、<latitude>要素（緯度）と
var latlng = new google.maps.LatLng(latitude, longitude);
<longitude>要素（経度）を取得
// トイレがある位置にマーカーを表示
var marker = new google.maps.Marker({position:latlng, map:map});
② マーカーを表示
// マーカーがタップされたときの処理
③ 地図上のオブジェクトに対する
google.maps.event.addListener(marker, "click", function(){
イベントの登録
// 吹き出しに表示する内容を設定
var info = $toilet.find("localname").text() + "<br>";
if($toilet.children().is("man")) {
④ <toiletinformation>の子要素
info += "男性用：" + $toilet.find("man").text() + "<br>";
に<man>があったら、という意味
}
～中略～
// 吹き出しを開く
infoWindow.setContent(info);
⑤ setContentで表示内容を
infoWindow.open(map, marker);
セットして、openで開く
});
}
URL : http://www.asial.co.jp/ │ Copyright ? 2013 Asial Corporation. All Rights Reserved.
｜
24
