第七章：把使用者鎖在地圖裡 - 限制 Map Bounds 與平移

當你在開發「台灣車泊地圖」或是「台北市拉麵地圖」時，如果使用者不小心用滑鼠一直滾，地圖跑到太平洋或是非洲去，然後找不到原本的標記點，他們會覺得這是一個設計非常不良、充滿廉價感的網站。

為了打造出企業級的專業地圖體驗，我們需要設定地圖的 邊界限制 (Max Bounds)，讓使用者無論怎麼拖拉、怎麼縮小，都只能在你規定的範圍 (例如台灣本島附近) 打轉。

🎯 本章目標

學習地理資訊系統 (GIS) 中「邊界框 (Bounding Box)」的核心觀念。
找出台灣地圖的經緯度邊界。
使用 AI 把邊界限制寫進 React-Leaflet 地圖元件，並鎖定最小縮放層級。

📦 觀念釐清：什麼是 Bounding Box (邊界框)？

在地球這顆球體上，我們很難直接說出「台灣的範圍」。在程式開發中，我們習慣用一個看不見的「長方形框框」把我們想要的區域包起來。這個長方形框框，只需要兩個點的座標就能完美定義：

左下角 (South-West)：長方形最南邊、最西邊的交界點。
右上角 (North-East)：長方形最北邊、最東邊的交界點。

以台灣為例，粗略的邊界框大約落在：

西南角：約為 [21.5, 119.5] (屏東外海、接近東沙群島方向)
東北角：約為 [25.5, 122.5] (基隆外海、釣魚台方向)

只要設定了這個框框，地圖引擎就會知道：「絕對不能讓使用者的視窗，超出這個長方形的範圍！」

🛠️ 實戰演練：用 Vibe Prompt 設定邊界

傳統在查閱 Leaflet 官方文件時，找 maxBounds 的語法往往需要翻閱大量的英文 API 文件。但身為 Vibe Coder，我們只要精準描述我們的需求即可。

🔥【Vibe Prompt 實戰咒語】 我正在使用 React-Leaflet 開發一個專注於台灣地區的地圖。目前遇到一個問題：使用者可以無限制地把地圖拖曳到國外，或是縮小到看見全世界，這不是我想要的。

請幫我修改我的 <MapContainer> 設定：

請幫我定義台灣大致的邊界範圍座標 (SouthWest 與 NorthEast)，並設定到 maxBounds 屬性中。

為了避免使用者縮得太小，請將 minZoom 設定為 7 或 8 (請依據你的經驗判斷最適合觀看全台灣的級別)。

請開啟 maxBoundsViscosity，並設定為 1.0。這樣當使用者試圖把地圖拖到國外時，會有一種「撞到硬牆壁」完全拖不動的感覺。

給我完整的 <MapContainer> 更新程式碼。

AI 收到指令後，會精準地幫你加上相關的屬性。在 React-Leaflet 中，程式碼看起來會像這樣：

import { MapContainer, TileLayer } from 'react-leaflet'
import L from 'leaflet'

// 1. 定義台灣的邊界框 (西南角, 東北角)
const taiwanBounds = L.latLngBounds(
  L.latLng(21.5, 119.5), 
  L.latLng(25.5, 122.5)  
);

export default function MyMap() {
  return (
    <MapContainer 
      center={[23.5, 121.0]} // 預設中心點在台灣正中心 (南投附近)
      zoom={8}
      minZoom={7} // 鎖定最小縮放級別，不讓他們縮小到看到全世界
      maxBounds={taiwanBounds} // 關鍵！限制拖拉範圍
      maxBoundsViscosity={1.0} // 拖拉時的邊界彈性 (1.0 代表像撞到牆壁一樣硬，不會有回彈感)
      className="w-full h-screen"
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* 你的標記點們... */}
    </MapContainer>
  )
}

加入這幾行程式碼後，你可以立刻開啟瀏覽器拖拉地圖試試看。當你試圖把地圖往左邊 (西邊) 滑動到中國大陸時，地圖會像被一塊看不見的透明玻璃擋住一樣，硬生生把你留在台灣海峽！

⚠️ [常見地雷區] 螢幕比例與邊界衝突

新手在設定 maxBounds 時最常遇到的地雷是：在電腦版上測試很完美，但到了手機版，地圖卻變得怪怪的，甚至會瘋狂抖動！

發生原因： 手機的螢幕是長條狀 (高瘦) 的，而電腦螢幕是橫向 (寬扁) 的。如果你把 minZoom 設定得太大 (例如限制不能縮小)，同時又鎖死了 maxBounds。當手機螢幕嘗試要把整個台灣塞進畫面時，會發現「縮放級別被卡死了塞不進去，但又被邊界限制不能平移」，這會導致 Leaflet 引擎發生衝突，產生奇怪的回彈或無法點擊的 Bug。

Vibe Coder 解法： 遇到這種衝突時，不要自己瞎猜。直接對 AI 說：「我設定了 maxBounds 與 minZoom={8}，在電腦版正常，但在手機版 (寬度 390px) 畫面會無法完整顯示台灣且無法正常縮放。請幫我寫一個 useEffect，判斷如果是手機尺寸，就把 minZoom 動態降級為 7。」透過動態調整，就能完美解決 RWD 響應式的衝突。

💼 [商業應用場景] 隱藏的成本節約術

限制 maxBounds 表面上是為了提升使用者體驗 (UX)，確保使用者不會迷失在地圖汪洋中，但它背後還有一個巨大的商業秘密：節省主機流量費！

你要知道，地圖上的每一張地貌圖片 (稱為 Tile 圖塊)，都是要從伺服器下載的。如果沒有限制範圍，使用者無聊把地圖滑到美國、滑到歐洲，這會瞬間觸發幾百張不必要的地圖圖塊下載。如果你使用的是付費的地圖服務 (如 Mapbox 或 Google Maps)，這些毫無意義的流量全部都是要算錢的！

透過設定嚴格的 Bounding Box 與 minZoom，你確保了系統「永遠只下載台灣地區的圖塊」。這個簡單的設定，可能在未來你的網站爆紅時，幫你每個月省下好幾萬塊的地圖 API 帳單！這就是資深工程師與菜鳥在架構思考上的巨大差異。

在下一章中，我們將解決另一個痛點：當你在台北市擠了 500 個標記點時，畫面會變得密密麻麻，我們將教你如何實作「群集收合 (Marker Clustering)」功能！