Mapbox地圖展示 測試

台北市中心地圖

#

這是一個使用 Mapbox GL JS 創建的簡約互動地圖。

測試不同樣式

#

預設深色樣式

#

您的自定義樣式

#

使用說明

#

這個地圖支援以下互動功能：

• 🖱️ 拖曳移動地圖
• 🔍 使用右上角按鈕縮放
• 📱 支援觸控操作
• 🖥️ 全螢幕模式

自定義參數

#

您可以使用以下參數自定義地圖：

{{< mapbox 
  lat="25.0330" 
  lng="121.5654" 
  zoom="13" 
  height="500px"
  style="mapbox://styles/mapbox/streets-v12"
  token="YOUR_MAPBOX_TOKEN" 
>}}

可用的地圖樣式

#

• mapbox://styles/mapbox/streets-v12 - 街道地圖（預設）
• mapbox://styles/mapbox/outdoors-v12 - 戶外地圖
• mapbox://styles/mapbox/light-v11 - 淺色地圖
• mapbox://styles/mapbox/dark-v11 - 深色地圖
• mapbox://styles/mapbox/satellite-v9 - 衛星地圖
• mapbox://styles/mapbox/satellite-streets-v12 - 衛星街道混合

取得 Mapbox Token

#

1. 前往 Mapbox 官網
2. 註冊免費帳號
3. 在 Dashboard 中取得 Access Token
4. 將 token 替換到 shortcode 中的 token 參數