第五章：一鍵定位！找出離我最近的營區在哪裡

想像一下這個情境：當使用者千辛萬苦把車開到山上的某個無名產業道路，天色漸漸變暗。他打開了你的「車泊地圖」，他最不想做的事情，就是在螢幕上慢慢滑動地圖，試圖在密密麻麻的台灣地圖中找出自己到底在哪裡。

他最想看到的第一件事情一定是：「我現在在哪裡？方圓 5 公里內有沒有安全的車泊點？」

這時候，我們就需要調用現代瀏覽器的強大武器：Geolocation API (地理位置定位 API)，並且結合上一章學到的 Leaflet flyTo 動畫，實作出跟 Google Maps 一模一樣的「定位到我的位置」按鈕。這是一個能大幅降低使用者焦慮感的救命功能。

🎯 本章目標

學習如何使用瀏覽器原生的 Geolocation API 獲取高精度 GPS。
了解取得定位時的「隱私權限制」與「https 安全連線」要求。
實作一個懸浮的「定位按鈕 (Locate Me)」。
讓地圖極度平滑地飛到使用者目前的所在位置，並標記出來。

📍 第一步：取得使用者座標 (Geolocation API)

在寫程式碼之前，你必須先知道瀏覽器對於「定位」這件事有著極度嚴格的資安限制。

[!WARNING] 隱私權與安全限制！(新手必讀)

取得使用者的 GPS 座標，絕對必須經過使用者點擊同意 (授權視窗)。如果使用者點了拒絕，你就拿不到資料。

多數現代瀏覽器 (例如 Chrome, Safari, Edge) 有一個強制規定：只有在 https:// (加密安全連線) 的網站，或是本機開發環境 (http://localhost) 的情況下，才允許網頁調用 Geolocation API。 如果你把網站部署到一個沒有 SSL 憑證的 http:// 網域，定位功能會直接失效且不會有任何提示！

了解限制後，我們不用去死背那些繁瑣的原生 API，直接召喚 AI 幫我們處理所有的錯誤攔截。

🔥【Vibe Prompt 實戰咒語】 在我的 React (Next.js) 地圖元件中，我想要做一個「定位到我的位置」的功能。 請給我一段名為 handleLocateMe 的函數，裡面呼叫 navigator.geolocation.getCurrentPosition。 需求細節： 1. 如果瀏覽器本身不支援這個 API，用 alert() 提示「您的瀏覽器不支援定位功能」。 2. 如果使用者拒絕授權或發生 Timeout 錯誤，用 alert() 顯示對應的繁體中文錯誤訊息。 3. 當成功取得座標 (latitude, longitude) 時，請先 console.log 印出座標。

AI 會產出一段非常強壯 (Robust) 的錯誤處理程式碼：

const handleLocateMe = () => {
  if (!navigator.geolocation) {
    alert("很抱歉，您的瀏覽器不支援地理定位功能！");
    return;
  }

  // 設定高精度模式與 Timeout 時間
  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };

  navigator.geolocation.getCurrentPosition(
    (position) => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
      console.log("📍 成功獲取座標：", lat, lng);
    },
    (error) => {
      switch(error.code) {
        case error.PERMISSION_DENIED:
          alert("無法取得位置：您拒絕了定位授權，請至瀏覽器設定中開啟。");
          break;
        case error.POSITION_UNAVAILABLE:
          alert("無法取得位置：目前沒有 GPS 訊號。");
          break;
        case error.TIMEOUT:
          alert("無法取得位置：定位請求超時，請稍後再試。");
          break;
      }
    },
    options
  );
};

🚁 第二步：結合 Leaflet 的 flyTo (平滑飛行)

我們不只要在 Console 印出無聊的數字座標，我們還要讓地圖「飛」過去，並給使用者一個明確的標記。在 Leaflet 中，有一個非常酷炫的函數叫做 flyTo。

🔥【Vibe Prompt 實戰咒語】 請修改剛剛的 handleLocateMe 函數。 1. 當成功取得座標後，請使用 mapInstance.flyTo([lat, lng], 16, { animate: true, duration: 1.5 }) 讓地圖飛過去。 2. 並且透過 React State (例如 setUserPosition) 將座標存起來。 3. 在 JSX 中，如果 userPosition 存在，請在該座標上渲染一個與營區不同的特殊 Marker (例如紅色標記或圓點)，並附帶 Popup 寫著「您的目前位置」。

把這段邏輯綁定到畫面上一個懸浮在右下角的按鈕 (absolute bottom-10 right-4)。現在，拿起手機測試。當你點下那顆按鈕，瀏覽器會跳出「是否允許存取您的位置」，按下同意後，你的畫面會如同電影鏡頭般，平滑地飛越山川城鎮，精準地降落在你目前站立的地方！

💼 [商業應用場景] 距離排序與導航串接

當你掌握了定位使用者的座標，你的地圖應用程式就瞬間擁有了極大的商業潛力。你可以將這個座標與資料庫結合，實作以下高價值功能：

實作「附近營區清單」：計算使用者座標與資料庫中所有營區座標的直線距離，並在側邊欄列出「距離你 5 公里內的空位營區」，這對於臨時找車泊點的人來說價值連城。
一鍵開啟 Google Maps 導航：在營區的 Popup 中加入一個按鈕，點擊後觸發 window.open('https://www.google.com/maps/dir/?api=1&origin=' + userLat + ',' + userLng + '&destination=' + campLat + ',' + campLng)。讓使用者能無縫接軌到最專業的導航軟體。

✅ 本章小結

加上了 Geolocation 功能，你的車泊地圖就從一個死板的「靜態圖片型錄」進化成了「具備環境感知能力的實用導航輔助工具」。這不僅提升了使用者體驗，更是所有在地化 O2O (Online To Offline) 商業模式的基礎核心。下一章，我們將帶你探索如何在地圖上畫出不同的多邊形與路線，解鎖更多進階玩法！