> ## Content Index
> Fetch the complete content index at: https://blog.anthea.day/llms.txt
> Use this file to discover other available public pages before exploring further.
# 歡迎來到 GIS 的世界－ Day 27：旅遊規劃小專案的查詢介面
- URL: https://blog.anthea.day/series-2022-ithome-27/
- Published: 2022-10-10T16:00:59.000Z
- Updated: 2026-11-06T19:48:25.000Z
- Author: Anthea / 芫荽
- Tags: #Migrated-1792241843742, #Import 2026-10-17 12:57, Coding, 2022 iThome 鐵人賽：歡迎來到 GIS 的世界
接續前一天的縣市找景點功能，複習一下我們會有的功能說明：
> \- 身為一個使用者，我可以點擊地圖上的查詢按鈕，選擇縣市之後找到該縣市的景點。
> \- 身為一個使用者，查詢縣市景點之後，地圖上只會呈現該縣市的景點。
昨天已經建立好 API，今天要做的就是顯示查詢的頁面，以及第二點重新渲染的部分。
### 1\. 查詢縣市的頁面顯示
這邊會使用到的套件有：[Bootstrap 5](https://getbootstrap.com/?ref=blog.anthea.day) 和 [Sweet Alert 2](https://sweetalert2.github.io/?ref=blog.anthea.day)，都是我在工作上沒有特別要求前端葉面的時候會使用到的工具，可以輕鬆地就完成一個簡單乾淨的頁面。
```
旅遊規劃
```
我想做到的效果是地圖上會有一個固定的查詢按鈕，但因為 Leaflet 預設地圖的 z-index 是 1000，所以必須把按鈕的數值再調大一點。成品如下：
有了按鈕之後，我們還需要先透過 Vue 來建立一個查詢的流程，包含：
1. 點擊後打開一個視窗
2. 選擇要查詢的縣市
這個部分我選擇直接用 Sweet Alert 的方式製作。首先要先加入點擊按鈕之後會出發的 alert，我是參考[官方網站的範例](https://sweetalert2.github.io/?ref=blog.anthea.day#input-types)進行修改的：
```HTML
旅遊規劃
```
重新整理網頁後應該就會看到 console 印出了下列的訊息：
好耶！那我們是不是可以直接套用前幾天的 `initMap()`，渲染到地圖上了呢?
### 2\. 重新渲染景點
前幾天所使用到的地圖初始化功能在這裡：
```JS
initMap(data){
// 設定地圖
let map = L.map('map').setView([24.175339, 120.648586], 19);
// 新增圖磚
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 建立點位
let layer = data.map(ele => { L.marker([ele.y, ele.x]).addTo(map) });
// 新增點位到圖磚上
map.addLayer(layer);
}
```
那我們是不是只要直接套用就可以了呢?
```JS
const app = Vue.createApp({
data(){},
methods:{
initMap(data){
// ...
},
getScenicSpots(){
// ...
},
searchScenicByCounty(){
Swal.fire({
// ...
}).then((result) => {
if (result.isConfirmed) {
axios({
method: 'get',
url: `./api/ScenicSpot/${result.value}`
}).then(res => {
// 初始化地圖
this.initMap(res.data);
}).catch(err => {
console.log(err);
})
}
})
},
},
mounted(){
this.getScenicSpots();
}
});
app.mount('#app');
```
如果你很開心的這樣做，然後重新整理頁面，按下查詢之後，你應該會發現的你的 console 出現了一個 error：
```
Error: Map container is already initialized.
```
由於我們在 Vue 掛載時就有用 `L.map('map')` 先初始化過地圖了，所以重複呼叫的時候就會出現這個錯誤。
#### Reference
- [TDX運輸資料流通服務 — 主資料代碼表查詢](https://tdx.transportdata.tw/api-service/codeQuery?ref=blog.anthea.day)