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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/*
This is a Example program to retrieve and display the data.
Press the Run button on the right of the screen (described the behavior of the Example program below).
Please create a new application rewrite this program work.
*/
// グローバル変数
eventlist_data = new Array(); // イベントリスト
genre_data = new Array(); // イベントジャンルリスト
spot_data = new Array(); // スポットリスト
eventtime_data = new Array(); // イベントタイムテーブル
stop_data = new Array(); // バス停リスト
week_data = new Array(); // 平日時刻表
holi_data = new Array(); // 休日時刻表
var user_lat = ''; // ユーザの緯度
var user_lng = ''; // ユーザの経度
var sel_spot_id = null;
var map;
var currentWindow = null; // 表示中のinfoWindow
// ページが表示されたときに関数を呼び出す
$('#list').bind('pageshow',checkChoice);
$('#detail').bind('pageshow',detailMapCanvas);
$('#map').bind('pageshow',mapCanvas);
$('#bus').bind('pageshow',busMapCanvas);
// 画面起動時の関数
window.onload = function() {
initialize();
//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}
// 初期化の関数
function initialize(){
//現在地の取得
getGeoLocation();
// LinkDataからデータの読み込み
loadData();
// バス停情報のロード
loadBusStopData();
//######################################################################################################################################
// 地図関連
//--------------------------------------
// 位置情報関連
// 位置情報の取得
function getGeoLocation(){
// HTML5 geolocation 機能で現在地を取得
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
// ユーザの現在位置を取得
user_lat = position.coords.latitude; user_lng = position.coords.longitude; // オリジナル
//user_lat = 35.177541; user_lng = 137.087564; // 公園駅
//user_lat = 35.173806; user_lng = 137.089160; // プール
//user_lat = 35.168942; user_lng = 137.092158; // 展望塔
//user_lat = 35.182279; user_lng = 137.021347; // 藤が丘駅
//user_lat = 35.154545; user_lng = 136.961582; // 名大
var user_pos = new google.maps.LatLng(user_lat, user_lng);
}, function() {
handleNoGeolocation(true);
});
} else {
// ブラウザがGeolocationをサポートしていない
handleNoGeolocation(false);
// 位置情報取得のエラー処理
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = '位置情報が取得できませんでした';
var content = 'ブラウザが位置情報機能に対応していません';
alert(content);
// 測地線航海算法の公式
function geoDistance(lat1, lng1, lat2, lng2, precision) {
// 引数 precision は小数点以下の桁数(距離の精度)
var distance = 0;
if ((Math.abs(lat1 - lat2) < 0.00001) && (Math.abs(lng1 - lng2) < 0.00001)) {
distance = 0;
lat1 = lat1 * Math.PI / 180;
lng1 = lng1 * Math.PI / 180;
lat2 = lat2 * Math.PI / 180;
/* div */
.content-wide{
margin: 0;
padding: 0;
table {
font-size: 90%;
.event-table-item {
width: 20%;
font-weight:bold;
#map-canvas {
width: 100%;
#detail-map-canvas {
height: 200px;
/* 画像 */
.titleImg {
margin: 0 0 20px 0;
.genre-icon {
width: 16px;
height: 16px;
margin: 3px 5px 0 5px;
/* 時刻表 */
.timetable {
height: 100%;
.timetable tr {
height: 20px;
.timetable tr:nth-child(odd) td {
background-color: #f8f8f8; /* 奇数行の背景色 */
.timetable tr:nth-child(even) td {
background-color: #f4f4f4; /* 偶数行の背景色 */
.timetable .tr-now {
font-weight: bold; /* 現在時刻 */
.timetable .tr-other {
color: #999999; /* それ以外 */
.timetable th {
.timetable .th-hour {
background-color: #dddddd;
.timetable .th-week {
background-color: #ddddff;
.timetable .th-holi {
background-color: #ffdddd;
.timetable td {
text-align: center;
.timetable .td-hour {
.timetable .td-week {
width: 40%;
.timetable .td-holi {
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!-- トップページ -->
<div data-role="page" id="home">
<div data-role="header">
<h3>夏まつりガイド</h3>
<a href="#map" class="ui-btn-right ui-btn ui-icon-location ui-btn-icon-left">地図</a>
</div>
<div data-role="content" class="content-wide">
<img src="http://app.linkdata.org/asset/95c374a0.png" class="titleImg">
<!-- イベント検索 ここから-->
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a"><h3>イベント検索</h3></div>
<div class="ui-body">
<form name="genre_chbox">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend><strong>ジャンル</strong></legend>
<input type="checkbox" name="genre_1" id="genre_1" checked="checked"><label for="genre_1"><img src="http://app.linkdata.org/asset/b80289ca.png" class="genre-icon">ステージ・ショー</label>
<input type="checkbox" name="genre_2" id="genre_2" checked="checked"><label for="genre_2"><img src="http://app.linkdata.org/asset/b2f99f39.png" class="genre-icon">飲食</label>
<input type="checkbox" name="genre_3" id="genre_3" checked="checked"><label for="genre_3"><img src="http://app.linkdata.org/asset/3c658641.png" class="genre-icon">体験・ワークショップ</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend></legend>
<input type="radio" name="time_choice" id="time_choice_1" value="now" checked="checked">
<label for="time_choice_1">開催中</label>
<input type="radio" name="time_choice" id="time_choice_2" value="all">
<label for="time_choice_2">全て</label>
</form>
<a href="#list" class="ui-btn"><img src="http://app.linkdata.org/asset/ef049daa.png" class="genre-icon">イベントを探す</a>
<!-- イベント検索 ここまで -->
<!-- バス情報 ここから-->
<div class="ui-bar ui-bar-a"><h3>園内バス情報</h3></div>
<a href="#bus" class="ui-btn"><img src="http://app.linkdata.org/asset/b93ee6a9.png" class="genre-icon">各バス停の時刻表を見る</a>
<!-- バス情報 ここまで-->
<div data-role="footer">
<h6>(c) fkmi.net</h6>
<!-- リストページ -->
<div data-role="page" id="list">
<div data-role="header" data-add-back-btn="true">
<h3>イベントリスト<span class="ui-li-count allEventCount"></span></h3>
<div data-role="content">
<ul data-role="listview" class="eventList"></ul>
<!-- イベント詳細ページ -->
<div data-role="page" id="detail">
<h3>イベント詳細</h3>
<a href="#map" class="ui-btn ui-icon-location ui-btn-icon-left ui-btn-right">地図</a>
<div id="detail-content"></div>
<div class="ui-bar ui-bar-a" id="detail_spot_name"><h3>会場までのアクセス</h3></div>
<div id="detail-map-canvas"></div>
<p><img src="http://app.linkdata.org/asset/b93ee6a9.png" class="genre-icon"><span id="bus_info"></span></p>
<a href="#bus" class="ui-btn">園内バスの時刻表を見る</a>
<!-- バスページ -->
<div data-role="page" id="bus">
<h3>園内バス情報</h3>
<div id="bus-map-canvas"></div>
<div class="ui-bar ui-bar-a" id="stop-name"></div>
<p id="stop-info"></p>
<table class="timetable" id="timetable"></table>
<p id="stop-info2"></p>
<table class="timetable" id="timetable2"></table>
<div data-role="popup" id="busTimePopup">
<!-- マップページ -->
<div data-role="page" id="map">
<h3>園内マップ</h3>
<div id="map-canvas"></div>
Click the Browse button or drag and drop to choose files to upload
The Maximum upload size is 1MB.(bmp,gif,jpeg,jpg,png)
*Required field
Add name for another language
You can upload jpg, gif, png file formats
Add description for another language
Fork original application has been updated. >>see
Original application has been updated. >>see
Playing...
Please enter a valid URL