使用 Drupal 設定 Leaflet 製作地圖

2025-05-09

標籤： 模組

廣告

在 Drupal 中使用 Leaflet 模組設定互動式地圖。本指南適用於 Drupal 10（或其他現代版本），並假設您對 Drupal 的基本操作（如模組安裝、內容類型管理和 Views）有一定了解。

步驟 1：安裝必要的模組

要使用 Leaflet 在 Drupal 中製作地圖，您需要安裝以下模組：

  1. Leaflet: 提供 Leaflet JavaScript 庫的整合，用於顯示互動式地圖。
  2. Geofield: 用於儲存地理數據（如經緯度、WKT 格式）。
  3. Geocoder（可選）：將地址轉換為地理坐標（需要額外的 API 支援，如 OpenRouteService）。
  4. Leaflet Views（可選）：用於在 Views 中顯示多個地點的地圖。
  5. Leaflet More Maps（可選）：提供更多地圖圖層選項（如 Google Maps、Stamen 等）。

安裝方法

  1. 使用 Composer 安裝模組（推薦）： bash composer require 'drupal/leaflet:^10.0' composer require 'drupal/geofield:^1.0' composer require 'drupal/geocoder:^3.0' composer require 'drupal/leaflet_more_maps:^2.1'

  2. 下載 Leaflet JavaScript 庫：

  3. 從 Leaflet 官網 下載最新版本。
  4. 解壓縮並將資料夾重命名為 leaflet，放置於 sites/all/libraries/leaflet。

  5. 確保 leaflet.js 位於 sites/all/libraries/leaflet/leaflet.js。

  6. 啟用模組：

  7. 進入 Drupal 後台：管理 > 擴展。

  8. 勾選並啟用 Leaflet、Geofield、Geocoder（若使用）及 Leaflet Views（若需要）。

  9. 檢查狀態報告：

  10. 前往 管理 > 報告 > 狀態報告，確保 Leaflet 庫正確安裝。

步驟 2：創建內容類型並添加地理字段

為了在地圖上顯示位置，您需要一個儲存地理數據的內容類型。

  1. 創建內容類型：
  2. 前往 結構 > 內容類型 > 添加內容類型。

  3. 創建一個新內容類型，例如「地圖位置」（Map Locations）。

  4. 添加字段：

  5. 在新內容類型中，點擊「管理字段」 > 「添加字段」。

  6. 添加以下字段：

    • 地址字段（可選）：
    • 字段類型：Address（需要 Address 模組）。
    • 用於輸入街道、城市等地址信息。
    • 地理字段：
    • 字段類型：Geofield。
    • 選擇輸入方式（如經緯度或 WKT）。
    • 設置為單值或多值，根據需求決定。

  7. 配置 Geocoder（若使用地址字段）：

  8. 前往 配置 > 系統 > Geocoder。
  9. 添加提供者（如 OpenRouteService）並輸入 API 密鑰（需註冊獲取）。
  10. 在 Geofield 字段設置中，選擇「從地址字段自動轉換」並指定對應的地址字段。

步驟 3：配置單一節點的地圖顯示

要在單個節點（內容）上顯示地圖，您需要配置 Geofield 的顯示格式。

  1. 管理顯示：
  2. 前往 結構 > 內容類型 > [您的內容類型] > 管理顯示。

  3. 找到 Geofield 字段，將其格式設置為 Leaflet。

  4. 配置 Leaflet 設置：

  5. 點擊字段旁的「齒輪」圖標，配置以下選項：
    • 地圖類型：選擇基礎地圖（如 OSM Mapnik 或其他來自 Leaflet More Maps）。
    • 縮放級別：設置初始縮放級別（例如 13）。
    • 標記圖標：選擇預設標記或上傳自定義圖標。
    • 彈出窗口（Popup）：啟用並設置顯示內容（可使用 Token 模組插入動態內容，如 [node:title]）。 ∞ 高度：設置地圖高度（如 400px）。

  6. 保存設置。

  7. 測試：

  8. 創建一個新節點，輸入地理數據（經緯度或地址）。
  9. 查看節點，確認地圖正確顯示。

步驟 4：使用 Views 顯示多個地點的地圖

若要顯示多個地點的地圖（例如所有「地圖位置」節點），需要使用 Leaflet Views 模組。

  1. 創建 Views：
  2. 前往 結構 > Views > 添加視圖。

  3. 設置：

    • 視圖名稱：例如「地圖視圖」。
    • 顯示：選擇「頁面」或「區塊」。
    • 內容類型：選擇「地圖位置」。
    • 格式：選擇「Leaflet Map」。

  4. 添加字段：

  5. 添加 Geofield 字段（儲存地理數據）。

  6. 可選：添加標題字段（用於彈出窗口）或描述字段。

  7. 配置 Leaflet Map 格式：

  8. 點擊「格式 > Leaflet Map > 設置」：
    • 數據來源：選擇 Geofield 字段。
    • 標題字段：選擇顯示在彈出窗口中的標題字段（例如標題）。
    • 描述內容：選擇描述字段或使用視圖模式（如 Teaser）。
    • 地圖類型：選擇基礎地圖。
    • 標記群集：啟用 Leaflet MarkerCluster（需要安裝對應子模組）以群集標記。
    • 地圖高度：設置地圖高度（如 600px）。

  9. 保存設置。

  10. 設置頁面或區塊：

  11. 為視圖設置路徑（例如 /map）或將區塊放置在指定區域。
  12. 保存並預覽視圖，確認地圖顯示所有地點。

步驟 5：進階自定義（可選）

自定義地圖圖層

  • 安裝 Leaflet More Maps 模組，添加更多地圖樣式（如 Stamen、Esri）。
  • 前往 配置 > 系統 > Leaflet More Maps，輸入所需的 API 密鑰（若需要）並選擇圖層。

自定義標記

  • 安裝 Leaflet More Markers 模組，支援 emoji 或字體圖標。
  • 在 Geofield 或 Views 設置中選擇自定義標記，並指定大小或動畫效果。

添加地址搜尋

  • 使用 Geocoder 模組啟用地址自動完成。
  • 前往 配置 > 系統 > Geocoder，設置提供者並啟用自動完成功能。

使用 API 自定義

  • 實現 hook_leaflet_map_info 鉤子以完全控制地圖行為（如圖層、縮放選項）。
  • 示例代碼可參考 leaflet.api.php。

步驟 6：測試與最佳化

  1. 測試地圖：
  2. 確認地圖在桌面和移動設備上均正常顯示。

  3. 檢查標記、彈出窗口和縮放功能是否正常。

  4. 最佳化：

  5. 確保地圖高度響應式（使用百分比或 CSS）。
  6. 啟用標記群集以提高大量數據的性能。
  7. 檢查是否有外部 API 依賴（如 OpenRouteService），並確保 API 配額充足。

常見問題與解決方案

  • 地圖未顯示：
  • 檢查 Leaflet 庫是否正確安裝（sites/all/libraries/leaflet）。
  • 確認是否有有效的地理數據。

  • 查看瀏覽器控制台是否有 JavaScript 錯誤。

  • 地址未轉換為坐標：

  • 確保 Geocoder 模組已正確配置並有有效的 API 密鑰。

  • 檢查地址字段格式是否正確。

  • 縮放控制樣式過小：

  • 使用 CSS 自定義縮放控制，或安裝 Leaflet Zoomslider 插件並在主題中引入相關 JS/CSS。

參考資源

廣告