快速開始

只需兩行即可嵌入 Kaleidr 地圖。

1. 加入 loader

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

kaleidr.js 非常輕量 — 不包含 MapLibre 或 React。它會從 cdn.kaleidr.com/embed/v1/<product>.js 隨選延遲載入您實際使用的產品 bundle。

2. 放置元素

這兩種方式都可在 Free 方案中運行。Viewer 透過 share link 控制存取（完全不需要金鑰）； Tile 使用僅限 maps / tile 的 Free publishable 金鑰。

<!-- A published map — no key needed (share-link gated) -->
<kaleidr-map product="viewer" share-id="abcd1234" style="height:480px"></kaleidr-map>

<!-- A designed basemap — your publishable key, maps scope -->
<kaleidr-map product="tile" publishable-key="kld_pk_live_…" style-id="kaleidr-morning"
             style="height:480px"></kaleidr-map>

瀏覽器不會告訴您以下兩個前提條件 — 請參閱取得 API 金鑰取得完整步驟：

您頁面的 origin 必須位於金鑰的 origin allowlist 中，否則 SDK 的工作階段交換會以 session_origin_mismatch 拒絕。file:// 嵌入一定會失敗 — 請透過 HTTP(S) 提供。
您的 CSP 必須允許 SDK loader 與地圖 iframe — 請參閱 Content Security Policy。

或以命令式方式掛載

將 AI chat 連接到頁面上現有的地圖。Chat 需要 ai 範圍以及 Pro 或更高方案 — Free 金鑰無法建立 Chat 工作階段。 contained: true 會將面板固定在掛載元素內；如果沒有它，面板會移動至 document.body。

const handle = Kaleidr.mount('#chat', {
  product: 'chat',
  publishableKey: 'kld_pk_live_…',
  map: myMap, // your live Mapbox / MapLibre / Google instance
  contained: true,
});

// later: handle.destroy();

Kaleidr.mount(target, opts) 會同步傳回一個 handle；產品 bundle 會在背景載入，排隊中的呼叫會在載入完成後執行。注意： handle.setCamera(...) 在 chat 上是 no-op — chat handle 不會控制地圖相機。請使用您自己的地圖實例的相機 API。

1. 加入 loader​

2. 放置元素​

或以命令式方式掛載​

下一步​

1. 加入 loader

2. 放置元素

或以命令式方式掛載

下一步