互動式去過的國家地圖

作者 The Kaleidr Team · 發布於 2026年8月16日 · 16 分鐘讀完

一幅互動式世界地圖,標出去過或想造訪的國家,並顯示旅遊進度統計和國家搜尋控制項。

互動式去過的國家地圖可讓旅客在世界地圖上選取國家,將其標記為去過或計畫造訪,儲存狀態並在之後繼續使用。它與帶城市圖釘的旅遊地圖不同,主要幾何物件是國界:每個國家都是與穩定識別碼和使用者狀態關聯的 Polygon 或 MultiPolygon。可靠的實作還要定義哪些實體算作國家、記錄邊界來源、確保小國也能被選取,並將旅遊資料與地圖樣式分開。

下文涵蓋資料架構、國家識別碼、邊界政策、MapLibre 呈現、持久化、無障礙、隱私、與 Studio 的銜接以及常見錯誤。相關產品資訊請參閱 Kaleidr Studio。基於地點圖釘的地圖請參閱如何建立帶圖釘的世界旅遊地圖,繪製大量地點請參閱在地圖上繪製地點

去過的國家地圖要點

  • 使用多邊形而非圖釘: 國家追蹤使用邊界,城市記憶使用點。
  • 分離資料集: 共享幾何透過穩定 ID 與個人化旅遊狀態連接。
  • 計數是一項政策: 符合資格的國家總數是產品規則,並非圖徵數量。
  • 狀態優先於樣式: 先儲存 visited / want_to_visit,再選取顏色。
  • 謹慎銜接: 輕量追蹤器可以引導使用者建立更豐富的 Studio 地圖,但不要誇大功能。

一幅互動式世界地圖,標出去過或想造訪的國家,並顯示旅遊進度統計和國家搜尋控制項。

什麼是互動式去過的國家地圖?

這是一幅讓國家充當互動式地理物件而非靜態背景的世界地圖。使用者通常可以選取國家,將其標記為去過或加入願望清單,按名稱搜尋,查看持續更新的數量或百分比,儲存進度並分享概要。核心模型由國家幾何、穩定國家 ID 和使用者旅遊狀態組成。圍繞該模型的產品決策很重要:國界具有政治敏感性,總數取決於計數政策,詳細的未來旅遊歷史也可能屬於隱私。

體驗 主要幾何 最適合
去過的國家地圖 國家多邊形 國家追蹤、全球進度、願望清單
帶圖釘的旅遊地圖 城市、地標、飯店、餐廳、回憶
路線地圖 線 + 點 公路旅遊、行程、旅途
旅遊日誌地圖 點 + 內容 筆記、照片、日期、故事

國家追蹤器回答旅客去過哪些國家,圖釘地圖回答其去過哪些具體地點。優秀的旅遊產品可以同時支援二者,而不必把它們強行塞進一幅過載的地圖。

應如何儲存國家幾何與旅遊狀態?

最清晰的架構會將地理基準資料與個人化旅遊狀態分開。邊界資料儲存穩定識別碼、顯示名稱、Polygon 或 MultiPolygon 幾何、可選區域或大洲、資料集版本,以及按產品計數政策確定的資格。使用者狀態只儲存旅客擁有的值,如 JP: visitedIS: want_to_visit。地圖設計可以改變,旅遊歷史不應改變。不要只用顏色編碼業務狀態;應先儲存語義狀態,再由呈現器決定使用紫色、青綠色、圖案還是輪廓。

國家名稱會因語言、縮寫、標點、命名慣例、官方變更和音譯而變化,因此不適合作為資料庫鍵。ISO 3166 被廣泛用於標準化國家代碼,ISO 3166 維護機構負責維護已分配的代碼集(ISO 3166)。請記錄哪個識別碼具有權威性——ISO alpha-2、alpha-3 或邊界提供方的圖徵 ID——並保留地理圖徵與使用者狀態之間的映射。

GeoJSON 同時支援 PolygonMultiPolygon;RFC 7946 定義了其結構,並使用經度在前的座標順序(RFC 7946)。許多國家因領土包含彼此分離的島嶼或區域而需要 MultiPolygon。座標順序詳情請參閱使用緯度和經度搜尋位置

國界幾何與個人化旅遊狀態分別儲存,再透過穩定的國家識別碼連接,生成互動式去過的國家地圖。

邊界資料集和國家計數如何運作?

去過的國家追蹤器需要維護良好的國家幾何來源。Natural Earth 發布 1:10m、1:50m 和 1:110m 比例尺的公眾領域地圖資料,包括 Admin 0 國家資料集;其文件區分國家、主權、地圖單元、子單元、爭議地區及可選地理視角(Admin 0 — Countries)。邊界文件並不是所有國家的通用定義。聯合國會員國清單是一種可選參考集,但旅遊產品可能以不同方式處理觀察員國、領土、屬地、構成國或爭議實體(UN Member States)。不要預設把 GeoJSON 圖徵數當作世界國家數。應在每個圖徵上明確資格,並對計數政策進行版本控管,使進度百分比始終可以解釋。

國界可能反映政治爭議和不同地理視角。面向消費者的旅遊地圖不應暗示其介面解決了這些爭議。請記錄邊界來源、資料集版本、計數政策版本及領土處理方式,並新增中立聲明,例如“邊界和國家數量遵循本地圖使用的地理資料集和計數政策”。不要用圖像模型或語言模型生成國界,應使用持續維護的地理空間資料。

地理政策示意圖:先對邊界資料集進行分類,再確定哪些實體計入旅遊進度總數。

如何呈現和更新國家選擇?

簡單的國家追蹤器會把國家 GeoJSON 載入到地圖來源,繪製填充圖層,處理選取,更新使用者狀態儲存區,重新設置圖徵樣式,並刷新進度和國家清單。MapLibre GL JS 可以使用 fill 圖層呈現 GeoJSON 多邊形(新增 GeoJSON 多邊形)。優先更改應用程式狀態:切換狀態、保存旅遊狀態、更新受影響圖徵的樣式,再重新計算統計資訊。避免每次點擊都重建整個國家資料集。產品需要時可支援多於兩個狀態:去過、想造訪和未造訪可覆蓋多數追蹤需求。

import maplibregl from "maplibre-gl";

const visited = new Set(["JPN", "FRA", "CAN"]);

const map = new maplibregl.Map({
  container: "map",
  style: "https://demotiles.maplibre.org/style.json",
  center: [10, 20],
  zoom: 1.2
});

map.on("load", async () => {
  const countries = await (await fetch("/data/countries.geojson")).json();
  countries.features = countries.features.map((feature) => ({
    ...feature,
    properties: {
      ...feature.properties,
      visit_status: visited.has(feature.properties.iso_a3)
        ? "visited"
        : "not_visited"
    }
  }));
  map.addSource("countries", { type: "geojson", data: countries });
  map.addLayer({
    id: "countries-fill",
    type: "fill",
    source: "countries",
    paint: {
      "fill-color": [
        "match",
        ["get", "visit_status"],
        "visited", "#6f5bd3",
        "want_to_visit", "#72c4c9",
        "#d8d8d8"
      ],
      "fill-opacity": 0.65
    }
  });
});

實作前請確認所選資料集的實際屬性結構。請使用設計系統中的無障礙顏色,而不是上面的範例值。

持久化、無障礙與隱私應如何設計?

匿名體驗可以把選取儲存在本機應用程式狀態和同一裝置的瀏覽器儲存中。登入體驗則在裝置間同步經過授權的後端旅遊資料。地圖呈現器負責顯示狀態,不應成為身分或持久化系統。請把地理政策中繼資料與已儲存資料一起進行版本控管,避免日後的資料集更新悄悄改寫歷史進度。

新增與地圖同步且可搜尋的國家清單,確保小國在行動裝置上仍可選擇。提供鍵盤可操作控制項、清晰的焦點,並確保狀態不只透過顏色傳達。預設應優先分享概略快照——去過的國家數量和公開國家集合——而不是匯出精確旅遊日期、飯店、路線、目前位置或未來計畫。願望清單和計畫旅遊屬於敏感資訊;只有使用者明確選取時才公開未來目的地。

AI 可以協助組織類別、在選取國家後建議更密集的城市圖層或優化樣式,但使用者選擇始終是旅遊歷史依據。不要根據模型知識編造去過的國家。

Kaleidr Studio 在其中扮演什麼角色?

輕量追蹤器可以先滿足搜尋意圖,再引導使用者建立更豐富的地圖。Kaleidr Studio 目前支援提示詞優先的自訂互動式地圖建立,包括資料驅動地圖、主題區域、標記、圖層、視覺樣式、發布和嵌入。公開 Studio 頁面目前沒有記錄帶自動使用者層級國家狀態永久保存、內建國家計數器或專用“去過/願望清單”切換模式的追蹤器;在相關能力實作並形成文件前,不應將其描述為現有 Studio 功能。推薦路徑是:互動式國家追蹤器 → 儲存或分享 → 轉換為更豐富的旅遊地圖 → 在 Studio 中優化並發布。為提高效能,請使用泛化的世界幾何,保持使用者狀態負載很小,僅在使用者要求時載入城市或地點詳情。

去過的國家追蹤器從國家選擇推進到已儲存資料、詳細城市與地點地圖、Studio 編輯,以及已發布的互動式旅遊地圖。

團隊應避免哪些錯誤?

錯誤 後果 更好的做法
使用國家名稱作為主鍵 在地化會破壞狀態 使用穩定識別碼
把填充顏色當作旅遊資料 主題變化會破壞邏輯 單獨儲存語義狀態
把 GeoJSON 圖徵當作國家計數 領土會扭曲總數 定義資格政策
寫死通用國家總數 假設變得不可見 發布計數政策
忽略邊界視角 地圖顯得具有政治權威性 記錄來源和政策
使用圖釘而非國家多邊形 無法滿足國家級意圖 讓國家區域可交互
讓小國無法選取 行動版和無障礙體驗受損 新增搜尋和同步清單
首次點擊前強制註冊 使用者導入阻力增加 適當時先允許本機狀態
預設分享精確旅遊歷史 隱私風險增加 僅分享使用者預期的概略狀態
把 AI 當作旅遊歷史真相 使用者狀態可能被編造 以使用者選擇為依據

最終結論

只有忽略那些使其可靠的決策時,互動式去過的國家地圖在技術上才顯得簡單。核心實作由國界、穩定 ID、使用者旅遊狀態、互動式填充圖層和已儲存進度組成。更難的是產品問題:什麼算國家、地圖遵循哪個邊界資料集、如何處理領土和爭議地區、狀態是否跨裝置保持、哪些內容公開分享,以及國家級地圖能否發展為更豐富的地點級旅遊地圖。對旅客而言,最佳體驗從其搜尋任務開始——點擊國家並看到地圖立即更新。當使用者需要超越國家進度的地點、區域、圖層、樣式和發布能力時,可以再透過 Kaleidr Studio 建立更豐富的地圖。

使用 Kaleidr Studio 建立更豐富的旅遊地圖

將國家、城市、地點和旅遊想法轉化為可自訂的互動式地圖。準備好從國家選擇擴展到更豐富的自行製作旅遊地圖時,在 Kaleidr Studio 中開始建立

常見問題

什麼是互動式去過的國家地圖?

它是一幅允許使用者選擇國家並儲存其旅遊狀態的世界地圖,通常包括去過、想造訪和未造訪。

它與帶圖釘的旅遊地圖有何區別?

去過的國家地圖突出國界;圖釘地圖標記具體城市、地標、飯店、餐廳或其他地點。

需要哪些地圖資料?

需要國界幾何(通常為 Polygon 或 MultiPolygon 圖徵)、穩定的國家識別碼,以及獨立的使用者旅遊狀態記錄。

可以使用 GeoJSON 表示國界嗎?

可以。GeoJSON 支援 Polygon 和 MultiPolygon,廣泛用於 網頁地圖。

應儲存哪種國家代碼?

ISO 3166 alpha-2 或 alpha-3 是常見選擇。請一致使用穩定識別碼,並記錄它們與所選邊界資料集的映射。

地圖應統計多少個國家?

沒有所有旅遊產品都必須採用的統一分母。請定義追蹤器是否僅統計特定參考集、是否包括觀察員國或領土,或採用其他有文件記錄的政策。

為什麼不同應用顯示的總數不同?

它們可能採用不同的國家定義、邊界資料集,或對領土與爭議地區的不同處理方式。

應如何處理爭議邊界?

使用持續維護的地理資料集,記錄其視角或邊界政策,並避免暗示旅遊應用解決了政治爭議。

地圖可以在沒有帳號的情況下工作嗎?

可以。瀏覽器本機儲存可在同一裝置上保留選擇。帳號有助於跨裝置同步、備份或持久分享。

Kaleidr Studio 可以建立旅遊地圖嗎?

可以。它目前支援基於提示詞的自訂互動式地圖,以及主題區域、標記、圖層、視覺樣式、發布和嵌入。公開 Studio 頁面目前未記錄專用的使用者層級去過的國家計數器或國家切換追蹤器。

參考資料

@misc{iso_3166_country_codes,
  title  = {ISO 3166 -- Country Codes},
  author = {{International Organization for Standardization}},
  note   = {Accessed 16 August 2026},
  url    = {https://www.iso.org/iso-3166-country-codes.html}
}

@misc{rfc7946,
  title  = {RFC 7946: The GeoJSON Format},
  author = {Butler, Howard and Daly, Martin and Doyle, Allan and Gillies, Sean and Hagen, Stefan and Schaub, Tim},
  year   = {2016},
  publisher = {Internet Engineering Task Force},
  url    = {https://datatracker.ietf.org/doc/html/rfc7946}
}

@misc{natural_earth_admin0,
  title  = {Admin 0 -- Countries},
  author = {{Natural Earth}},
  note   = {Version 5.1.1; accessed 16 August 2026},
  url    = {https://www.naturalearthdata.com/downloads/110m-cultural-vectors/110m-admin-0-countries/}
}

@misc{un_member_states,
  title  = {Member States},
  author = {{United Nations}},
  note   = {Accessed 16 August 2026},
  url    = {https://www.un.org/en/about-us/member-states}
}

@misc{maplibre_geojson_polygon,
  title  = {Add a GeoJSON Polygon},
  author = {{MapLibre}},
  note   = {MapLibre GL JS documentation; accessed 16 August 2026},
  url    = {https://maplibre.org/maplibre-gl-js/docs/examples/add-a-geojson-polygon/}
}

@misc{kaleidr_studio_2026_08_16,
  title  = {Create Custom Maps with AI Map Maker},
  author = {{Kaleidr}},
  note   = {Accessed 16 August 2026},
  url    = {https://kaleidr.com/studio}
}

@misc{kaleidr_docs_2026_08_16,
  title  = {Build with Kaleidr},
  author = {{Kaleidr}},
  note   = {Developer documentation; accessed 16 August 2026},
  url    = {https://docs.kaleidr.com/}
}