圖 30 不同圖層
6.5 搜尋功能
點選首頁左上方的搜尋圖示，如圖31 所示，可以進入餐廳搜尋畫面。
圖 31 首頁之搜尋功能
在搜尋方框內輸入欲查詢的餐廳，如下圖 32 所示，以下採用位於政大周邊
26
餐廳- Arty 作為操作示範，輸入完畢後，接著點選搜尋按鈕，即可在同一頁面之 地圖下方，出現該餐廳的詳細訊息，例如：該餐廳之照片，聯絡電話，營業時間 等，如圖33，為進行搜尋後，所顯示的餐廳介紹。
圖 32 以 Arty 餐廳進行搜尋
圖 33 搜尋結果
此外，在搜尋結果中，亦可以點選按鈕“地圖”，在頁面上方的地圖，便 會顯示該餐廳在地圖上的位置，以及餐廳資訊，如下圖34 所示
圖 34 點選按鈕”地圖”之顯示畫面
27
七、參考文獻
W3school，http://www.w3schools.com
Django Tutorial Document，https://www.djangoproject.com The Django Book，http://djangobook.py3k.cn/2.0/
Leaflet Maps，http://leafletjs.com/examples/quick-start/
Bootstrap，http://getbootstrap.com/
Elasticsearch，https://fsxiaodao.gitbooks.io/elasticsearch-reference-zh/content/
Python Tutorial Document，http://www.python.org Python Tutorial，http://www.tutorialspoint.com/python3/
PostgreSQL，http://www.postgresql.org/
Allen Downey, 2008, Think Python -- An Introduction to Software Design.
1
校園地圖系統操作手冊
使用者介面
本系統網址為
maps.nccu.edu.tw，可在不同的平台上瀏覽及使用本系統。在不
同廠牌及不同螢幕尺寸之電腦、手機抑或平板皆能呈現本系統之樣貌，不會因為 在不同平台上瀏覽而產生版面跑版或功能無法使用的情形。下圖為在不同平台下 進入本系統起始頁面之瀏覽情形。圖 1 Windows Google Crome 瀏覽情形
圖 2 Iphone6 IOS Safari 瀏覽情形
2
首頁
首頁主要包含四個部分
店家地圖：使用者可以任意縮放及套疊不同圖層，查看店家詳細資訊。
建物地圖：使用者可以任意縮放及套疊歷史圖層，查看過去政大校園的 點點滴滴。
搜尋功能：將搜尋店家資訊呈現在出來並可知道其地理位置。
返回政大：點選右上角之政大校徽即可返回政大首頁。
圖 3 網站系統首頁
首頁功能部分，政大生活圈下面分別有店家地圖、建物地圖、搜尋功能之 簡單介紹，點選下方圖片會分別連結到各功能頁面。
圖 4 圖片超連結功能
3
最下方為如何使用地圖平台，簡單介紹此網站系統應該要如何進行操作，
讓第一次使用本網站系統師生得以迅速熟悉並使用之。
圖 5 操作簡易說明
4
店家地圖
點選導航欄上的店家地圖後可以進入到店家地圖頁面，即可看見政大周邊商 家的地圖，如圖 6。
圖 6 店家地圖
地圖的左上角是可以控制縮放大小的按鈕，及右上角有兩個控制選單，第一 個選單可以選擇使用不同的底圖如開放街圖、正射影像圖等等，以及可以套疊不 同的透明圖層如段籍圖、地形圖等等，圖 7。套疊不同地圖後，可以點選地圖上 任意位置關閉該選單。
5
圖 7 店家地圖套疊
除了初始設定選擇出現標示餐廳類店家外，使用者也可以從右上角的第二個 控制選單選取想要出現的店家類型，除了餐廳類店家還有其他如影印店等商家類、
飲料類、早餐類等等的店家標示可以出現在地圖上，圖 8。
圖 8 不同店家的選取
6
選取完不同的圖層及店家類型後，可以點選頁面上感興趣的店家標示，將會 跳出該店家的資訊框，說明該店家的資訊，如店名、電話、地址、營業時間等資 訊，提供使用者更多該店家相關的資訊，圖 9。
圖 9 店家資訊框
7
最後若是使用者發現政大附近有其他新開的店家，可以於此頁面下方點選新 增新的店家，圖 11。將會進入到新增店家資訊，填寫之後我們將會先行審核該店 家是否為新開之店家，進而將其新增在本系統當中，圖 10。
圖 10 新增店家頁面 圖 11 新增店家連結
8
建物地圖
首先在最上方的功能表列中選到建物地圖，圖12，
圖 12 在功能表列選到建物地圖
接下來底下會出現一張政大的校園地圖，圖13，而圖中橘色的多邊形及代 表著政大校園內不同的建築物，使用者可以透過點擊建物，便可得知該建物的詳 細資訊。
圖 13 校園地圖
使用者可以透過點擊建物，便可得知該建物的詳細資訊，該視窗中會顯示 該建物的照片、相關介紹與相關連結網址，圖14。按彈出式視窗中最下方的「縮 放至」連結可以將地圖放大至建物的位置。
圖 14 建物詳細資訊
9
如果要調整地圖的大小與位置時，左上方有一加減號的符號按鈕，圖15。加 減號中間的房子符號，是代表回到地圖最一開始的檢視位置。
圖 15 縮放按鈕
另外，為了解政大這地區的變遷以及歷史，本地圖特別搭配了不同的圖層 供使用者套用，來查看不同年代時政大校園此塊土地過去的使用情形。
點選地圖左上角的 符號，會跳出不同的圖層供選擇，圖16。我們提供了 過去幾年的台灣經建版地圖，以及日治時期的地形圖供使用者做選擇與套用。
圖 16 不同圖層
10
搜尋功能
點選首頁左上方的搜尋圖示，如圖 17 所示，可以進入餐廳搜尋畫面。
圖 17 首頁之搜尋功能
在搜尋方框內輸入欲查詢的餐廳，如下圖 18 所示，以下採用位於政大周邊 餐廳- Arty 作為操作示範，輸入完畢後，接著點選搜尋按鈕，即可在同一頁面之 地圖下方，出現該餐廳的詳細訊息，例如：該餐廳之照片，聯絡電話，營業時間 等，如圖 19，為進行搜尋後，所顯示的餐廳介紹。
圖 18 以 Arty 餐廳進行搜尋
圖 19 搜尋結果
11
此外，在搜尋結果中，亦可以點選按鈕“地圖”，在頁面上方的地圖，便 會顯示該餐廳在地圖上的位置，以及餐廳資訊，如下圖 20 所示
圖 20 點選按鈕”地圖”之顯示畫面