第九章：新手必踩的坑！為什麼我的地圖是一片灰色？

開發地圖應用程式 (特別是使用 React-Leaflet) 時，新手最容易遇到一個讓人極度崩潰的靈異現象：「我的程式碼編譯成功，Terminal 沒有噴出任何紅字 Error，但在瀏覽器上，裝地圖的區塊只出現了一塊無聊的灰色方塊。」或者是：「地圖的圖片碎成一塊一塊的，標記也全都不在正確的位置上，好像整個空間被扭曲了一樣！」

這時候，新手往往會開始自我懷疑：是不是 React 壞掉了？是不是我下錯了指令？是不是我電腦的問題？千萬不要緊張，這 99% 都是同一個非常經典、非常低級的錯誤引起的。

🎯 本章目標

認識 Leaflet 開發中最常見的「失蹤的 CSS」問題。
解決地圖容器高度為 0 的靈異現象。
處理打包工具導致的「標記圖片破圖 (Icon Not Found)」問題。
掌握 Vibe Coder 面對靈異現象的 Debug 思維。

👻 經典災難一：失蹤的 Leaflet CSS (破碎的地圖)

症狀描述： 地圖有出來，但是全世界的地圖圖塊 (Tiles) 散落一地，互相重疊，沒有對齊。藍色的定位標記跑到畫面最左上角，整個畫面看起來像是一幅糟糕的抽象畫。

發生原因： Leaflet 不只是一包負責計算經緯度的 JavaScript 程式碼，它還依賴了一堆用來排列網格、定位圖層的 CSS 樣式。如果你在終端機只用了 npm install leaflet，但在你的程式碼中卻忘記引入它的 CSS 檔案，瀏覽器就不知道該怎麼排版這些地圖圖片，導致整個畫面碎裂。

🔥【Vibe Prompt Debug 實戰】 「我在 Next.js 中使用了 React-Leaflet，但畫面上的地圖碎掉了，圖塊沒有對齊互相重疊，而且終端機與 Console 都沒有任何 Error 報錯。請問我是不是漏了引入 CSS？請告訴我應該在哪個檔案補上什麼 import 語句。」

解決方案： AI 會立刻告訴你，只要在你的全域 CSS 檔案 (例如 globals.css 或是元件的頂端)，加上這一行：

@import "leaflet/dist/leaflet.css";

或者在 React 檔案的最上方 import：

import 'leaflet/dist/leaflet.css';

按下儲存，你會發現地圖瞬間像拼圖一樣自動歸位，恢復正常！

📏 經典災難二：高度消失的容器 (一片灰或全白)

症狀描述： 網頁打開，原本該顯示地圖的地方一片空白，或者只有一條 1 pixel 的橫線。用滑鼠亂點也沒反應。

發生原因： 這通常是因為 Leaflet 需要一個「明確的高度 (Height)」。在網頁排版中，如果你把地圖塞進一個 <div> 容器裡，但沒有給這個容器設定高度，瀏覽器會以為裡面沒有內容，自動把高度縮成 0。地圖就被擠壓到看不見了。

Vibe Coder 解法 (Tailwind CSS)： 你需要給裝著 <MapContainer> 的外層 div (或是 MapContainer 本身) 加上明確的高度：

// 錯誤示範 (沒有高度)：
<div className="w-full">
  <MapContainer ... />
</div>

// 正確示範：給定 h-[500px] 或是 h-screen (全螢幕高度)
<div className="w-full h-[600px] rounded-xl z-10">
  <MapContainer className="h-full w-full" ... />
</div>

(注意：在處理地圖時，z-index 盡量設定在 0 ~ 10 之間。如果地圖的層級太高，它會把網頁上方的 Navbar 或懸浮選單全部蓋過去！)

❌ 經典災難三：找不到圖標圖片 (藍色標記變破圖)

症狀描述： 地圖正常顯示了，但是原本該出現藍色水滴標記的地方，出現了一個方形的破圖圖示 (Image Not Found)。或者在 Console 看到 404 (Not Found) 的圖片載入錯誤。

發生原因： Leaflet 的原生預設標記，是指向它套件包裡面的某個路徑。但現代的前端打包工具 (像是 Webpack 或 Vite 或 Next.js)，在編譯時會改變靜態資源的路徑。導致程式碼去預設路徑找圖片時，發現圖片已經被搬走，就出現破圖。

解決方案： 最簡單且最治本的商業級解決方案，就是像我們在「第三章：客製化地圖標記」所教的： 絕對不要依賴 Leaflet 預設的圖片！

自己去 Flaticon 或網路上下載一個好看的圖示 (例如帳篷.png)。
把圖片放進你的 public/ 資料夾中。
寫一段程式碼明確定義你的客製化 Icon：

const customIcon = L.icon({
  iconUrl: '/tent-icon.png', // 指向你自己的 public 目錄
  iconSize: [38, 38],
  iconAnchor: [19, 38]
});

這不僅解決了破圖問題，還能讓你的地圖充滿品牌特色。

✅ 本章小結：Vibe Debug 心法

在這個章節，你學到了遇到地圖開發問題時的三板斧。更重要的是，你必須建立一個心態：遇到靈異現象時，與其盯著程式碼看半天、懷疑人生，不如直接把「畫面的怪異症狀」描述給 AI 聽。 「我遇到了靈異現象，畫面呈現 OOO 狀態，但沒有報錯」。身經百戰的 AI 腦袋裡裝滿了全世界工程師過去十年踩過的坑，它會在一秒鐘之內，幫你點出那個你少寫的 CSS，讓你立刻下班！

下一章，我們將帶你進入地圖開發的最終大招：實作營區搜尋與平滑飛越功能 (FlyTo)！