跳至主要内容

Chat

Chat 產品可將 Kaleidr Control Tower 連接到您已經運行的地圖。 它以頁面內覆蓋層的形式讀取使用者的地圖並與其互動 — 控制 導覽、解析地點，並直接在您自己的地圖實例上繪製路線。

決定是否能正常運作的三個關鍵因素​

要素說明
接入方式attach — 面板掛載在您的頁面內，並控制您傳入的地圖 DOM 物件。不是 iframe。
所需範圍ai — 金鑰必須包含 ai 能力。
最低方案Pro — Free 方案的金鑰不允許使用 ai 範圍。

瀏覽器能將 publishable 金鑰交換為工作階段權杖之前，您的頁面來源必須 位於該金鑰的 origin allowlist 中。設定步驟請參閱 取得 API 金鑰。

各元件的位置​

唯一需要的程式碼片段​

一個使用 MapLibre 的最小可用 BYOM（bring-your-own-map）Chat attach。請從 金鑰 origin allowlist 中的 HTTP(S) 來源提供此頁面 — file:// 不會傳送 Origin，因此工作階段交換一定會失敗。

<link rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.css">
<div id="mapHost" style="height:520px;position:relative">
  <div id="map" style="position:absolute;inset:0"></div>
  <div id="chat" style="position:absolute;inset:0;z-index:1;pointer-events:none"></div>
</div>
<script src="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-0.12, 51.5],
    zoom: 11,
  });
  Kaleidr.mount('#chat', {
    product: 'chat',
    publishableKey: 'kld_pk_live_…',
    map,
    contained: true,
  });
</script>

contained: true 會將面板固定在掛載元素內，而不是讓它浮動在 document.body 上。如果沒有此選項，面板會離開地圖容器，並在頁面配置上 看起來像是發生故障。