首頁主要包含四個部分，第一個部分為「店家地圖」，以Leaflet Map 為底圖 並介接國土測繪中心之豐富圖資來呈現政大校園生活圈之店家相關資訊，使用者 可以任意放大、縮小及套疊不同圖層，並可查看店家詳細資訊；第二個部分為「建 物地圖」，以 OpenStreetMap 為底圖並介接中研院之歷史圖資來呈現政大校園生 活圈之建物相關資訊，使用者可以任意放大、縮小及套疊歷史圖層，查看過去政 大校園的點點滴滴；第三個部分為「搜尋功能」，利用 ElasticSearch 做店家資訊 搜尋，將搜尋店家資訊呈現在出來並可知道其地理位置。第四個部分為「返回政 大」，點選右上角之政大校徽即可返回政大首頁。
圖 17 網站系統首頁
首頁功能部分，政大生活圈下面分別有店家地圖、建物地圖、搜尋功能之 簡單介紹，點選下方圖片會分別連結到各功能頁面。
圖 18 圖片超連結功能
最下方之如何使用地圖平台，簡單介紹此網站系統應該要如何進行操作，
讓第一次使用本網站系統師生得以迅速熟悉並使用之。
21
圖 19 操作簡易說明
6.3 店家地圖
點選導航欄上的店家地圖後可以進入到店家地圖頁面，其中可以看見標示政 大周邊商家的地圖，圖20。地圖的左上角是可以控制縮放大小的按鈕，及右上角 有兩個控制選單，第一個選單可以選擇使用不同的底圖如 OSM、正射影像圖，
以及可以套疊不同的透明圖層如段籍圖、地形圖等等，圖21。套疊不同地圖後，
可以點選地圖上任意位置關閉該選單。
圖 7. 店家地圖套疊
圖 21 店家地圖 圖 20 店家地圖套疊
22
除了初始設定選擇出現標示餐廳類店家外，使用者也可以從右上角的第二個 控制選單選取想要出現的店家類型，除了餐廳類店家還有其他如影印店等商家類、
飲料類、早餐類等等的店家標示可以出現在地圖上，圖22。
圖 22 不同店家的選取
選取完不同的圖層及店家類型後，可以點選頁面上感興趣的店家標示，將會 跳出該店家的資訊框，說明該店家的資訊，如店名、電話、地址、營業時間等資 訊，提供使用者更多該店家相關的資訊，圖23。
圖 23 店家資訊框
23
最後若是使用者發現政大附近有其他新開的店家，可以於此頁面下方點選新 增新的店家，圖24。將會進入到新增店家資訊，填寫之後我們將會先行審核該店 家是否為新開之店家，進而將其新增在本系統當中，圖25。
6.4 建物地圖
首先在最上方的功能表列中選到建物地圖，圖26，接下來底下會出現一張 政大的校園地圖，圖27，而圖中橘色的多邊形及代表著政大校園內不同的建築物，
使用者可以透過點擊建物，便可得知該建物的詳細資訊。再點擊的同時，會有一 說明的彈出式視窗，該視窗中會顯示該建物的照片、相關介紹與相關連結網址，
圖28，點按彈出式視窗中最下方的「縮放至」連結可以將地圖放大至建物的位置。
如果要調整地圖的大小與位置時，左上方有一加減號的符號按鈕，圖29，可 以透過點選加、減號分別放大與縮小地圖。並透過拖曳的功能，直接移動地圖到 使用者到想要查看的位置。而加減號中間的房子符號，是代表回到地圖最一開始 的檢視位置。
圖 25 新增店家連結 圖 24 新增店家頁面
24
另外，為了解政大這地區的變遷以及歷史，本地圖特別搭配了不同的圖層 供使用者套用，來查看不同年代時政大校園此塊土地過去的使用情形。使用方法 是點選地圖左上角的 符號，便會跳出不同的圖層供選擇，圖30，我們提供了 過去幾年的台灣經建版地圖，以及日治時期的地形圖供使用者做選擇與套用，夠 過點按後勾選便可將不同圖層套用道地圖上，而不需使用時只需再點按一次便可 以關閉該圖層。
圖 26 在功能表列選到建物地圖
圖 27 校園地圖
圖 28 建物詳細資訊
25
圖 29 縮放按鈕
圖 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 點選按鈕”地圖”之顯示畫面