第四章：效能救星！實作 Marker Clustering (標記叢集)

如果你的地圖上只有 10 個地標，運作會非常順暢。但當你的資料庫有 5,000 個車泊地點，而且使用者一次把地圖縮小到全台灣的範圍時，瀏覽器同時渲染 5,000 個圖片標記，絕對會造成極嚴重的卡頓甚至當機！

為了解決這個問題，地圖開發中有一項必備技術叫做 Marker Clustering (標記叢集)。

🎯 本章目標

了解什麼是 Marker Clustering。
使用 Vibe Prompt 讓 AI 幫我們整合 leaflet.markercluster 套件。
成功實作當縮小地圖時，相近的標記會合併成一個寫著數字的圓圈。

🧩 第一步：安裝 MarkerCluster 套件

我們需要一個專門處理叢集的擴充套件。

[!TIP] Vibe Prompt (請複製並發送給 AI)： 我正在使用 React + Leaflet。我遇到地標太多會卡頓的問題。 請給我 npm 安裝 leaflet.markercluster 以及其 type 宣告的指令。

在終端機執行 AI 提供的指令：

npm install leaflet.markercluster
npm install -D @types/leaflet.markercluster

🕸️ 第二步：引入必備的 CSS (新手最常犯的錯！)

跟 Leaflet 一樣，markercluster 也有自己的樣式檔。如果你忘記引入，叢集圈圈會變成透明的，數字會散落在一旁！

請確保在 Layout.astro 的 <head> 或是全域 CSS 中引入：

<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />

🚀 第三步：改寫 React 地圖邏輯

現在，我們要用 Vibe Coding 請 AI 幫我們把原本「直接把標記加到地圖上」的邏輯，改成「先加到叢集群組裡，再把群組加到地圖上」。

[!TIP] Vibe Prompt (請複製並發送給 AI)： 我已經安裝了 leaflet.markercluster。請幫我修改我的 React Map 元件。 原本我是用 L.marker(...).addTo(map)。 現在我需要你幫我建立一個 L.markerClusterGroup()。 然後使用一個 for 迴圈，把 1000 筆假資料的標記都加到這個 group 裡面，最後再把 group addTo(map)。 請附上完整的 useEffect 程式碼。

AI 會產出這段神奇的程式碼：

import 'leaflet.markercluster'; // 必須引入擴充包

useEffect(() => {
  if (!mapRef.current) return;
  const map = L.map(mapRef.current).setView([23.5, 121.0], 7);
  // ...載入圖層略...

  // 1. 建立叢集群組
  const markersGroup = L.markerClusterGroup();

  // 2. 假設 data 是從資料庫來的營區陣列
  data.forEach(camp => {
    const marker = L.marker([camp.lat, camp.lng], { icon: customIcon });
    marker.bindPopup(`<b>${camp.name}</b>`);
    
    // 3. 把標記加進群組，而不是直接加進 map！
    markersGroup.addLayer(marker);
  });

  // 4. 最後一次性把群組加進地圖
  map.addLayer(markersGroup);

  return () => {
    map.remove();
  };
}, [data]);

現在，當你把地圖縮小時，相近的幾百個標記會自動合併成一個橘色或黃色的圈圈，上面寫著「352」。當你點擊圈圈，地圖會自動放大並散開標記。這不僅效能極高，視覺體驗也非常專業！

![Marker Cluster]([SCREENSHOT_PLACEHOLDER: 瀏覽器中顯示地圖上有多個包含數字的彩色叢集圈圈截圖])

✅ 本章小結

遇到效能瓶頸時，不要自己硬幹，詢問 AI 業界的「Best Practice (最佳實踐)」，並請它幫你套用套件，才是現代軟體開發的捷徑。有了這個功能，你的車泊地圖已經具備了商業級應用程式的標準了！