将 Kaleidr AI 连接到 Mapbox 地图

将 Control Tower 连接到现有 Mapbox GL 地图。

需要 Pro 或更高套餐中具有 ai 作用域的 publishable key。您页面的 origin 必须位于该 key 的 allowlist 中，并通过 HTTP(S) 提供 — 请参阅 获取 API 密钥。

<link rel="stylesheet"
      href="https://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-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://api.mapbox.com/mapbox-gl-js/v3.9.4/mapbox-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  mapboxgl.accessToken = 'pk.…';
  const map = new mapboxgl.Map({ container: 'map', center: [-0.12, 51.5], zoom: 11 });

  Kaleidr.mount('#chat', {
    product: 'chat',
    publishableKey: 'kld_pk_live_…',
    map,
    contained: true,        // dock inside #chat, not on document.body
  });
</script>

关于此 snippet 的说明：

• mapbox-gl.css 不是可选项 — 缺少它时地图不可见。
• JS 和 CSS 都固定为特定版本（3.9.4）。未指定版本的 unpkg / api.mapbox.com URL 无法构成可复现的 quickstart。
• contained: true 会将 chat panel 固定在 #chat 内。否则 panel 会浮动在 document.body 上方，在地图上看起来像是损坏。

chat panel 会自动检测 Mapbox，将解析出的地点作为 marker 绘制在您的地图上，并随着对话推进调整相机视野。 使用量计入 ai 作用域。请参阅 Chat attach。