撰寫 J AVA S CRIPT 程式語言引入 G OOGLE M APS API 的函式，將所建立的資料呈現在 G OOGLE

器上

將 GPS 軌跡器收集的資料，建成 XML 檔案格式，並且利用 JavaScript 去連 結 Google Maps API 的函式進而將資料呈現在 Google Maps 上。並將 Google Maps 上所呈現的資料放在 HTML 檔裡面，利用 CSS 程式語言將其呈現出來，使 網頁具有較為一致的風格，並維持未來更新時的彈性。

圖10 互動式地圖呈現範例圖

18

將所建立的 XML 資料，

利用 JavaScript 建立在 MySQL 資料庫裡。

撰寫 JavaScript 程式語言引入 Google API 的函式，將所建立的資料呈現在 Google Maps 上，並將互動式地圖的結果以 HTML 的方式呈現在網際瀏覽器上。

將蒐集的資料用 ODBC 的技術連結 本計畫所建的 MySQL 資料庫。

將所蒐集的測試資料 用 XML 建立資料庫 利用 GPS 軌跡器，

蒐集測試地點座落 處照片和影音。

圖11 開發方法流程圖

19

六. 使用者手冊 A、使用者介面：

1. 進入網頁的起始畫面：

一開始進入網頁時，網頁會自動提供院類別的資料，並顯示在地圖上，讓使 用者可進行其他查詢或是登入管理系統的動作。

圖12 進入網頁起始畫面畫面圖

20

2. 依類別查詢地點資料

圖13 依類別查詢地點畫面圖

如上圖所示，使用者可以從紅框中之工具，進行查詢的動作，首先選擇想查 詢的類別，再按下執行即可進行查詢的動作，而查詢解果會有查詢到跟無查 詢到兩種結果，可從下面解說了解。

21

2.1 有查詢到資料：如下圖所示，假設使用者查詢的類別為校園公車路 線，網頁便會去搜尋為校園公車路線類型的資料，有搜尋到就會直接顯示 在地圖上。

圖14 有查詢到地點畫面圖

22

2.2 沒查詢到資料：如下圖所示，假設使用者查詢的類別為店家，網頁便 會去搜尋院類別的資料，若無查尋到相關資料就會在地圖上跳出訊息。

圖15 無查詢地點畫面圖

23

3. 依單一點查詢地點資料

圖16 依單一點查詢地點畫面圖

如上圖所示，使用者可以從紅框中之工具，進行查詢的動作，首先輸入想查 詢的地點名稱，再按下查詢即可，而查詢解果會有查詢到跟無查詢到兩種結 果，可從下面解說了解。

24

3.1 有查詢到資料：假設使用者輸入綜合院館，網頁便會去搜尋是否有綜 合院館的資料，有搜尋到就會直接顯示在地圖上。

圖17 依單一點有查詢到地點畫面圖

25

3.2 無查詢到資料：假設使用者輸入綜合院館，網頁便會去搜尋是否有綜 合院館的資料，若無查尋到相關資料就會在地圖上跳出訊息。

圖18 依單一點無查詢到地點畫面圖

26

4. 觀看查詢到的景點資料

4.1 若使用者查詢到綜合院館後，對此點左擊一下後，便可觀看到詳細的 資訊，首先會看到此景點的基本資料，其中包括名稱、地址、經緯度、及 代表圖片

圖19 觀看地點基本資料畫面圖

27

4.2 選第二項相關圖片，可看到此綜合院館的相關的照片

圖20 觀看地點相關圖片畫面圖

28

4.3 第三項相關影音，可看到此綜合院館的相關的影音

圖21 觀看地點相關影音畫面圖

29

4.4 第四項相關連結，可看到此綜合院館的相關的連結，並使用連結

圖22 觀看地點相關連結畫面圖

30

4.5 第五項相關資訊，可看到此綜合院館的相關的資訊

圖23 觀看地點相關資訊畫面圖

31

B、管理者登入介面:

1 輸入管理者的帳號和密碼，即可登入管理系統:

圖24 管理者登入畫面圖

32

2 登入後的起始頁面

2.1 登入管理系統的起始畫面都會預設在新增頁面:

圖25 管理者登入起始頁面畫面圖

33

3 新增景點或路線資料

3.1 輸入要新增景點的名稱、地址和種類(總共分為六大類):

圖26 管理者新增資料畫面圖

34

3.2 選新增景點類型並在地圖上選點位:系統會自動將點所在座標寫入下方 經緯度的 textbox 裡面。

圖27 管理者新增資料畫面圖

35

3.3 填寫相關連結資料名稱，並輸入正確網址，最多填入三筆資料:

圖28 管理者新增資料畫面圖

3.4 填寫影音名稱，並選取影音資料上傳，最多填入三筆資料:

圖29 管理者新增資料畫面圖 3.5 選取圖片資料上傳，最多填入三筆資料:

圖30 管理者新增資料畫面圖

36

3.6 填寫詳細資訊，並按增加按鈕上傳資料至系統:

圖31 管理者新增資料畫面圖

圖32 管理者新增完成畫面圖

37

4.編輯景點資料:

4.1 編輯景點頁面:

圖33 管理者編輯資料畫面圖

38

4.2 輸入欲編輯景點名稱並按連結資料，系統會自動從資料庫中取該筆景 點其他項目的資料。

圖34 管理者編輯資料畫面圖

4.3 選取欲修改項目的資料做編修，並按編修紐至系統。

圖35 管理者編輯資料畫面圖

39

圖36 管理者編輯完成畫面圖

40

5 查詢景點名稱或路線資料:

5.1 查詢景點名稱或路線資料頁面:

圖37 管理者查詢資料畫面圖

5.2 選擇下拉式選單中欲查詢的資料種類(共六種)並按查詢按扭至系統:

圖38 管理者查詢資料畫面圖

41

5.3 查詢種類的資料結果如下:

圖39 管理者查詢完成畫面圖

42

6 刪除景點或路線資料

6.1 刪除景點或路線頁面:

圖40 管理者刪除資料畫面圖

6.2 輸入欲刪除資料的名稱並按刪除按鈕至系統:

圖41 管理者刪除資料畫面圖

43

圖42 管理者刪除完成畫面圖 7 使用者帳戶管理:

7.1 使用者帳戶管理介面:

圖43 管理者帳戶管理畫面圖

44

7.2 使用者更改密碼部分，按下使用者更改密碼的連結:

圖44 管理者帳戶管理畫面圖

7.2.1 輸入舊密碼、新密碼、以及確認密碼(與新密碼一樣)，輸入後 按下更改按鈕:

圖45 管理者帳戶編輯畫面圖

45

圖46 管理者帳戶編輯完成畫面圖

7.3 新增使用者部分，按下新增使用者帳戶的連結:

圖47 管理者帳戶新增畫面圖

46

7.3.1 輸入帳號、密碼和確認密碼，並按下確認鍵:

圖48 管理者帳戶新增畫面圖

圖49 管理者帳戶新增完成畫面圖

47