雖然我們功能已經差不多了但也僅此與前端的功能，若要變成更完整的一個專案可以再加入PWA、後端登入、將景點儲存在資料庫等等，又或是將地圖套件做得更完整，礙於時間限制所以沒辦法完成，但我們還是在這邊向各位介紹一下幾個Leaflet中常見的功能。

1.leaflet-routing-machine：

這個套件一樣是透過npm install來安裝，他可以實現導航的功能，這對一個旅遊網站來說是滿重要的，下面的範例程式碼可以在兩個景點中找到最佳路線，使用者也可以在地圖上拖動路徑，詳情可以到官方文件中查看。

import 'leaflet-routing-machine';

L.Routing.control({
  waypoints: [
    L.latLng(startLatitude, startLongitude),
    L.latLng(destinationLatitude, destinationLongitude)
  ],
  routeWhileDragging: true,
}).addTo(map);

2.地圖事件與互動功能：

你可以透過 Leaflet 的事件處理機制為地圖添加更多互動性，例如點擊地圖上的任意位置來新增景點或測量距離。以一個功能齊全的旅遊網站來說，有時候可能沒有收錄到一些冷門景點，那這時候我們就可以在地圖上自行新增。

map.on('click', function(e) {
  const newMarker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map)
    .bindPopup('新增景點').openPopup();
});

3.GPS 定位與用戶當前位置：

本專案的地圖中心是寫死的，沒辦法讓使用者根據自己實際位置去更新地圖中心，為了讓用戶了解自己的當前位置，並推薦附近的景點，我們可以使用 **Leaflet 的定位功能，**有了這個功能會讓整個專案可以更加的完整。

map.locate({ setView: true, maxZoom: 16 });

function onLocationFound(e) {
	const radius = e.accuracy / 2;
	
	L.marker(e.latlng).addTo(map)
	.bindPopup("你在這裡，精度範圍 " + radius + " 公尺").openPopup();
	
	L.circle(e.latlng, radius).addTo(map);
}

map.on('locationfound', onLocationFound);

4.更滑順的過度效果：

可以透過map.flyTo來完成過度效果，像是搜尋完景點後可以將地圖中心改成該景點，那中間就可透過這個過度效果讓整體畫面更流暢。通常使用這個的時候也會搭配useRef一起使用，有興趣的朋友可以再去官方文件閱讀一下。

map.flyTo([destinationLat, destinationLng], zoomLevel, {
  animate: true,
  duration: 2 // 飛行時間
});

5.總結：

在今天我們也簡單介紹了幾個可以讓旅遊網站更完整的幾個Leaflet功能。當然，這邊也只是小小的範例，還是要根據專案裡的寫法再做更改，不可能這麼簡單只要複製貼上就完事了，還是要花上不少時間慢慢調整跟學習。最後希望大家可以好好學習這個地圖套件，因為真的是簡單好用，那如果還有其他問題歡迎在底下留言一起討論。