> ## 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 28：旅遊規劃小專案 重新渲染景點
- URL: https://blog.anthea.day/series-2022-ithome-28/
- Published: 2022-10-11T16:01:58.000Z
- Updated: 2026-11-06T19:50:56.000Z
- Author: Anthea / 芫荽
- Tags: #Migrated-1792241843742, #Import 2026-10-17 12:57, Coding, 2022 iThome 鐵人賽：歡迎來到 GIS 的世界

### 30 天從後端開始學 GIS — Day 28

昨天提到我們想要做到重新渲染 markers 這件事情。從功能上來看，初始化地圖和新增 markers 的確是兩件事，所以我的思路會是把這兩件事情分開來，一開始就初始化，有資料之後才去渲染 markers。

為了做到這件事情，我們需要進行一些調整：

```JS
const app = Vue.createApp({
    data(){
        return{
            // 新增一個物件來接初始化之後的地圖
            map: null
        }
    },
    methods:{
        initMap(){
            // 把初始化後的物件丟到 Vue 裡
            this.map = L.map('map');
            
            this.map.setView([24.175339, 120.648586], 19);
            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
        },
        resetMarkers(data){
            // 建立 markers
            let markers = L.markerClusterGroup();
            data.map(ele => { markers.addLayer(L.marker([ele.y, ele.x])) })
            this.map.addLayer(markers);
        },
        getScenicSpots(){
            axios({
                method: 'get',
                url: './api/ScenicSpot'
            }).then(res => {
                // 改成呼叫 resetMarkers()
                this.resetMarkers(res.data);
            }).catch(err => {
                console.log(err);
            })
        },
        searchScenicByCounty(){
            Swal.fire({
               // ...
            }).then((result) => {
                if (result.isConfirmed) {
                    axios({
                        method: 'get',
                        url: `./api/ScenicSpot/${result.value}`
                    }).then(res => {
                        // 改成呼叫 resetMarkers()
                        this.resetMarkers(res.data);
                    }).catch(err => {
                        console.log(err);
                    })
                }
            })
        },
    },
    mounted(){
        // 先初始化地圖
        this.initMap();
        this.getScenicSpots();
    }
});
app.mount('#app');
```

1. 建立一個物件來接地圖，才能針對同一個地圖新增 markers
2. 把初始化和新增 markers 的行為分開
3. 把呼叫初始化地圖的部分修改成呼叫新增 markers

來看看我們修正的第一版結果：

![](https://cdn-images-1.medium.com/max/800/0*zAEHp17ipVajiNEG.png)

初始化和取得所有景點看起來是正常的，景點查詢的功能操作起來也沒問題，但因為我們沒有先把前一次新增上去的 markers 移除，所以新增進去的會和舊有的一起顯示，但這很明顯不是 Feature，是 Bug。

### 移除舊有 markers

我的思路還是很簡單，給他一個物件存起來，如果這個物件不是空的，那就把它整包移除：

```JS
const app = Vue.createApp({
    data(){
        return{
            map: null,
            
            // 新增一個物件來接 markers
            oldMarkers: null
        }
    },
    methods:{
        initMap(){
            // ...
        },
        resetMarkers(data){
            // 如果舊有的 markers 不是空的，就移除
            if (this.oldMarkers !== null) this.map.removeLayer(this.oldMarkers);
            
            let markers = L.markerClusterGroup();
            data.map(ele => { markers.addLayer(L.marker([ele.y, ele.x])) })
            this.map.addLayer(markers);
        },
        getScenicSpots(){
            // ...
        },
        searchScenicByCounty(){
            // ...
        },
    },
    mounted(){
        // ...
    }
});
app.mount('#app');
```

有新增移除之後的結果：

![](https://cdn-images-1.medium.com/max/800/0*2HC2YIuSt9tK68QS.png)

原本的 markers 都被移除了，只剩下我們查詢的縣市的景點們。

#### Reference

- [Leaflet — How to find existing markers, and delete markers?](https://stackoverflow.com/questions/9912145/leaflet-how-to-find-existing-markers-and-delete-markers?ref=blog.anthea.day)