第一章：專案介紹與 Astro 地圖套件初始化

歡迎來到 Car Camping Map (車泊地圖) 的 Vibe Coding 實戰課程！ 這是一個進階的地理資訊 (GIS) 專案。我們將教你如何使用 AI 處理地圖座標、實作全螢幕互動地圖，以及如何讀取龐大的露營地資料。

🎯 本章目標

  1. 建立 Astro 專案並引入 Leaflet 地圖套件。
  2. 學習下達精確的 Prompt，讓 AI 幫我們處理繁瑣的 CSS 與套件載入問題。
  3. 在畫面上成功渲染出一個全螢幕的世界地圖。

🗺️ 為什麼選擇 Leaflet？

在網頁地圖的世界裡，最知名的是 Google Maps API，但它需要綁定信用卡，且流量大時會收費。 Leaflet 是一個極度輕量、開源且完全免費的地圖庫！透過 Leaflet 搭配 OpenStreetMap 圖資，我們可以用零成本打造出媲美 Google Maps 的體驗。

🚀 實戰：初始化 Astro 與安裝 Leaflet

請先依照 Course 1 的方法建立一個 Astro 專案，然後我們準備安裝 Leaflet。

[!TIP] Vibe Prompt (請複製並發送給 AI)： 我在 Astro 專案中想要使用 Leaflet 來顯示全螢幕地圖。 請幫我完成以下事項： 1. 給我 npm 安裝 leaflet 和對應 @types 的指令。 2. 告訴我在 Astro 的 <head> 裡面需要引入哪些 Leaflet 的 CSS 檔案 (CDN 或是 import)。 3. 寫一個簡單的 Map 元件 (可以是 Astro 元件內嵌 script，或是 React 元件)，設定一個特定的經緯度 (例如台灣中心) 作為起始視角，並在畫面上渲染出來。

AI 通常會給你以下的安裝指令：

npm install leaflet
npm install -D @types/leaflet

處理 CSS 的關鍵！

很多新手在玩 Leaflet 時，地圖圖塊會「四分五裂」，這通常是因為忘記引入 CSS！ 透過上面的 Prompt，AI 會提醒你在 Layout.astro 的 <head> 加入：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

![Leaflet 載入畫面]([SCREENSHOT_PLACEHOLDER: 瀏覽器中成功顯示全螢幕台灣地圖的畫面])

💻 實作 Map 元件

如果你是用 React 實作，AI 會給你類似這段程式碼。我們必須確保它在 Client 端執行，所以要在 index.astro 加上 client:only="react"。

import { useEffect, useRef } from 'react';
import L from 'leaflet';

export default function Map() {
  const mapRef = useRef(null);

  useEffect(() => {
    // 確保只初始化一次
    if (!mapRef.current) return;
    
    // 設定台灣中心座標 (緯度 23.5, 經度 121)
    const map = L.map(mapRef.current).setView([23.5, 121.0], 7);

    // 載入 OpenStreetMap 圖塊
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    return () => {
      map.remove(); // 清除地圖實例
    };
  }, []);

  return <div ref={mapRef} className="w-full h-screen z-0" />;
}

![React Map Code]([SCREENSHOT_PLACEHOLDER: 編輯器中 React 地圖元件程式碼的截圖])

✅ 本章小結

這就是 Vibe Coding 的威力，你不需要去查 Leaflet 的官方文件看 L.map 怎麼寫，只要把你的「意圖」告訴 AI，它就會給你正確的寫法和避免踩坑的提示（例如 CSS 的引入）。

下一章，我們將進入難度極高的「地理空間資料庫設計 (PostGIS)」，教你如何用 Prompt 讓 AI 幫你在 Supabase 中建立能夠搜尋「附近 5 公里內營地」的資料表！