跳到主要内容

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 上。如果没有该选项，面板会脱离地图容器，并在页面布局上 看起来像是出现了故障。