嵌入已发布的地图

完成本指南后，您在 Kaleidr Studio 中制作的地图便可显示在自己的网页上，限制允许展示地图的网站，并让页面获知地图是否成功加载。所有套餐（包括 Free）都支持。发布地图需要 Kaleidr 账户，但不需要 API 密钥。

开始之前

您准备好向公众展示的 Kaleidr Studio 地图。
可自行编辑的网页。SDK 元素需要 <script> 标签，普通 iframe 只需要 HTML。
如果网站使用内容安全策略（CSP），需要允许嵌入 https://map-embed.kaleidr.com；SDK 元素还需允许从 https://cdn.kaleidr.com 加载脚本。参阅 Content Security Policy。
测试时通过 HTTP 提供网页的方式，例如在文件夹内运行 npx serve .。

第 1 步：发布地图

在 Studio 打开地图并选择 Publish，进入 Publish & embed 页面。
在 Project status 下，状态显示 Draft。点击 Go Live。

**预期结果：**状态变为 Live，按钮变为 Re-publish，旁边出现 Unpublish 按钮；页面同时显示 Embed code 区域及其下方的实时预览。

已发布地图展示的是 Studio 中当前保存的内容，而不是点击 Go Live 时生成的副本。Studio 会在编辑过程中保存更改，因此发布后每次保存的编辑（包括新添加的数据集）都会在下次加载嵌入地图时公开。无需为这些修改再次点击 Re-publish。该按钮只会记录一个新的已发布版本，地图 ID、链接和嵌入代码不变；访客在重新发布前后看到的地图相同。

若要修改已发布地图而不让访客看到编辑过程，请先选择 Unpublish，完成后重新发布，或者在地图副本中进行编辑。取消发布会让该地图所有嵌入停止工作，直到重新发布。

发布范围包含您上传的数据。地图 Data 面板中的数据集与图像叠加层会按照设定的图层样式向访客显示。在发布可能包含敏感信息的数据前，请阅读已发布地图上的上传数据。

第 2 步：复制嵌入代码

Embed code 区域提供两种格式。

Studio 中的格式	获得的代码	适用场景
iFrame	指向已发布地图的普通 `<iframe>`。	网页无法运行自定义脚本（例如网站构建器、CMS 区块、维基页面），或者只需显示地图。
Developer	SDK 加载脚本及 `<kaleidr-map product="viewer">` 元素。	能控制网页代码，希望从程序控制或移动相机、在地图上叠加聊天面板，或管理单页应用中的地图生命周期。

选择格式，然后点击 Copy。

iFrame 格式：

<iframe
  src="https://map-embed.kaleidr.com/embed/YOUR_MAP_ID"
  width="100%"
  height="480"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation; microphone; fullscreen; clipboard-write"
  title="Kaleidr map"
></iframe>

Developer 格式：

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js" async></script>
<kaleidr-map product="viewer" share-id="YOUR_MAP_ID"
  style="display:block;width:100%;height:480px;"></kaleidr-map>

YOUR_MAP_ID 代表 Studio 在示例代码中生成的地图 ID。它由字母、数字、.、_、~ 和 - 组成，最长 100 个字符。两种嵌入格式使用相同的 ID。

两种格式都带有地图的 Kaleidr AI：开启 Control Tower 时提供 Ask Kaleidr 面板，开启 Popup Window 时在弹出窗口中提供 AI 聊天。参阅已发布地图上的 Kaleidr AI。

第 3 步：将代码添加到页面并设置尺寸

把示例代码粘贴到需要显示地图的位置。

**预期结果：**先显示“Loading map…”提示，随后显示 Studio 中保存的地图视角。

尺寸规则：

**普通 iframe：**像设置其他 iframe 一样，指定 width 和 height。
**SDK 元素：**为元素设置高度。<kaleidr-map> 默认是 display:block，所以高度有效。示例依然设置 style="display:block; height:480px"，兼容 Safari 16.4 之前的版本（旧版将元素视为行内元素并忽略高度）。也可以在样式表中设置宽高。 (height)
```
kaleidr-map { display: block; height: 480px; }
```
地图占满元素宽度。如果元素在挂载时没有高度，地图就固定使用 500 像素的高度，即使之后设置高度也不会自动调整。在隐藏标签页或折叠面板中，元素可能没有高度；应等到可见时再挂载，或预先设置明确高度。
响应式高度可以使用任何能计算出高度的 CSS，例如 height:60vh、aspect-ratio:16/9 或 flex/grid 布局单元。

第 4 步：设置初始相机视角（可选）

地图初始展示作者保存的视角。作者可以针对桌面、平板和手机宽度分别保存视角，也可以让地图自动包含全部内容；后一种模式会根据嵌入容器宽度选择视角，并在容器调整大小时重新适配。如果需要在其他位置打开地图，请传入相机参数。center 的坐标顺序为先经度、后纬度。

在 SDK 元素上：

<kaleidr-map product="viewer" share-id="YOUR_MAP_ID"
             center="-0.1276,51.5072" zoom="12" pitch="45" bearing="-20"
             style="display:block; height:480px"></kaleidr-map>

普通 iframe 可在 URL 中添加 camera=longitude,latitude,zoom：

<iframe
  src="https://map-embed.kaleidr.com/embed/YOUR_MAP_ID?camera=-0.1276,51.5072,12&pitch=45&bearing=-20"
  width="100%" height="480" style="border:0;" loading="lazy"
  referrerpolicy="no-referrer-when-downgrade" allow="geolocation; microphone; fullscreen; clipboard-write"
  title="Kaleidr map"></iframe>

您传入的相机设置会覆盖作者保存的视角，包括不同屏幕宽度与自动适配内容的设置。只会覆盖您指定的字段，其他字段保留作者的值。只要页面设置了相机，地图就不会再在容器尺寸变化时自动重新适配。特别注意：如果没有同时指定 center，zoom 将被忽略。 pitch 和 bearing 可以单独生效。

**预期结果：**地图按指定视角打开，原有的标记、图层和上传数据保持不变。

如果要在地图加载后移动相机，可通过 JavaScript 挂载地图并保留返回的句柄：

<div id="map" style="height:480px"></div>
<button id="paris">Paris</button>

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const handle = Kaleidr.mount('#map', {
    product: 'viewer',
    shareId: 'YOUR_MAP_ID',
  });

  document.getElementById('paris').addEventListener('click', () => {
    // duration is in milliseconds. Leave it out to jump with no animation.
    handle.setCamera({ center: [2.3522, 48.8566], zoom: 12, duration: 800 });
  });
</script>

使用 setCamera 时需要了解两点：

setCamera 是 Kaleidr.mount 返回的句柄上的方法，不是元素本身的方法。document.querySelector('kaleidr-map').setCamera 为 undefined。如果通过元素挂载地图，请修改它的 center、zoom、pitch 或 bearing 属性，地图会立即跳到新视角，没有动画。
Kaleidr.mount 返回后可随时调用该方法。即使 iframe 中的地图尚未准备完成，相机命令也会被保留，并在收到就绪消息后执行，因此不必等待第 6 步介绍的 kaleidr-embed:ready 消息。初始视角应通过挂载参数设置。
与初始相机设置一样，之后调用此方法也会覆盖作者保存的视角并关闭尺寸变化时的自动重新适配；未传入的字段仍保持当前值。

第 5 步：限制哪些网站可以显示地图（可选）

默认情况下，知道已发布地图 ID 的任意网站都可以嵌入该地图。限制方法如下：

在 Studio 打开地图并选择 Share。打开 Share 对话框时，如果地图尚未发布，会自动发布，并且每次都会新建一个分享链接。
打开 Embed 标签页。
将访问权限下拉菜单从 Any domain 改为 Specific domains。
每行输入一个域名，例如：
```
example.com
blog.example.org
```
点击输入框外部，Studio 会保存列表并显示 Saved。

**预期结果：**地图仍可在列表中的网站显示。其他网站的嵌入框会提示：“This map isn’t allowed to render on this site. Please contact the map owner.”

列表匹配规则：

只填写主机名。开头的 https:// 会被忽略；不要填写路径或端口。
域名同时涵盖其子域名。example.com 允许 example.com、www.example.com 和 shop.eu.example.com。
要在本机测试，请在启用域名列表时加入 localhost。

检查依赖于 Referer 信息

地图通过浏览器加载 iframe 时发送的来源信息来判断网站是否被允许。如果没有收到 Referer，设置了域名限制的地图不会显示。这可能发生于：

网页在响应头或 <meta name="referrer"> 中使用 Referrer-Policy: no-referrer 或 same-origin；
iframe 使用 referrerpolicy="no-referrer"；
页面通过磁盘上的 file:// URL 打开；
用户直接在浏览器标签页中打开地图的 iframe URL。

浏览器默认的 strict-origin-when-cross-origin 策略会发送来源信息，因此可以正常工作。若网站使用更严格的策略，请保留普通 iframe 示例中的 referrerpolicy="no-referrer-when-downgrade"，或适当放宽该页面的策略。

如果地图位于另一层 iframe 中，Referer 将是外层框架的地址，因此应将该框架的域名加入允许列表。

允许域名只控制地图可显示在哪些网站，并不能让已发布地图的内容保密，包括地图绘制的数据集。参阅已发布地图上的上传数据。不要发布必须保密的数据。

第 6 步：获知地图加载成功或失败（可选）

SDK 没有 ready Promise，元素也不会触发事件。加载结果通过 iframe 向页面发送的两种消息传递：

消息	发送时间	字段
`kaleidr-embed:ready`	地图首次完成绘制。	`type`、`id`（地图 ID）、`source`（`"publish"` 或 `"share"`）
`kaleidr-embed:error`	地图加载失败或部分内容无法绘制。	`type`、`id`、`code`、`message`

在 window 上监听消息，并检查消息的来源及发送消息的 iframe：

const el = document.getElementById('locations'); // the <kaleidr-map> element

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://map-embed.kaleidr.com') return;
  const frame = el.querySelector('iframe');
  if (!frame || event.source !== frame.contentWindow) return;

  const msg = event.data;
  if (!msg || typeof msg.type !== 'string') return;

  if (msg.type === 'kaleidr-embed:ready') {
    console.log('map loaded', msg.id);
  } else if (msg.type === 'kaleidr-embed:error') {
    console.warn('map problem', msg.code, msg.message);
  }
});

使用普通 iframe 时，应比较 event.source 与该 iframe 的 contentWindow。

错误消息的 code 可能为以下值：

`code`	含义	访客在框架中看到的提示
`no_id`	iframe URL 中没有地图 ID。	“Couldn't find a map id in the URL.”
`not_found`	没有使用该 ID 的已发布地图：可能尚未发布、已取消发布或 ID 有误。	“This map isn't available — it may have been unpublished, paused, or the link is incorrect.”
`domain_not_allowed`	网站不在允许域名列表，或浏览器没有发送 Referer。	“This map isn't allowed to render on this site. Please contact the map owner.”
`map_loads_exhausted`	地图所属组织在当前周期内已用完地图加载配额。	“This map has reached its map load limit. It will be available again when the owner's allowance resets.”
`fetch_failed`	无法获取地图，例如发生网络故障。	“Could not load the map. Please try again in a moment.”
`maplibre_error`	地图已启动，但部分内容绘制失败。`message` 包含详细信息。	地图可能仍显示，但部分内容缺失。

关于消息时间的说明：

除 maplibre_error 外，其他错误码出现时地图都不会显示，且不会收到 ready。
maplibre_error 可在 ready 前后出现，也可能多次出现。应将其视为警告，而非地图完全不可用的证明。
SDK 会延迟加载 iframe。如果地图位于页面很下方，访客滚动接近它之前不会开始加载，因此也不会收到消息。不要把几秒没有消息误判为失败。
iframe 还会发送其他用于 SDK 内部工作的 kaleidr-embed: 消息。这些不是公开接口；只匹配上述两种消息，忽略其他内容。

完整网页示例

保存为 index.html，将 YOUR_MAP_ID 替换为地图 ID，然后通过 HTTP 提供文件夹。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Our locations</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 2rem; }
    #map { height: 480px; }
  </style>
</head>
<body>
  <h1>Our locations</h1>
  <p id="status">Loading the map…</p>

  <div id="map"></div>
  <p>
    <button id="london">London</button>
    <button id="paris">Paris</button>
  </p>

  <script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
  <script>
    const target = document.getElementById('map');
    const status = document.getElementById('status');

    const handle = Kaleidr.mount(target, {
      product: 'viewer',
      shareId: 'YOUR_MAP_ID',
    });

    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://map-embed.kaleidr.com') return;
      const frame = target.querySelector('iframe');
      if (!frame || event.source !== frame.contentWindow) return;
      const msg = event.data;
      if (!msg || typeof msg.type !== 'string') return;

      if (msg.type === 'kaleidr-embed:ready') {
        status.textContent = 'Map loaded.';
      } else if (msg.type === 'kaleidr-embed:error' && msg.code !== 'maplibre_error') {
        status.textContent = 'The map could not load (' + msg.code + ').';
      }
    });

    document.getElementById('london').addEventListener('click', () => {
      handle.setCamera({ center: [-0.1276, 51.5072], zoom: 12, duration: 800 });
    });
    document.getElementById('paris').addEventListener('click', () => {
      handle.setCamera({ center: [2.3522, 48.8566], zoom: 12, duration: 800 });
    });
  </script>
</body>
</html>

运行方式

项目	行为
初始视角	默认使用作者保存的视角；页面传入的相机设置会逐字段覆盖它。
滚动	指针位于地图上方时滚动会缩放地图，与 Studio 中相同；指针位于地图之外时，滚动会移动页面。触屏设备上拖动可移动地图，双指捏合可缩放地图。
更新	嵌入地图展示 Studio 当前保存的内容；访客下次加载即可看到修改，不需要重新发布。
上传数据	地图 Data 面板中添加的数据集和图像叠加层会按照样式向访客显示。参阅上传数据。
取消发布	地图取消发布后，嵌入框显示不可用提示。重新发布后相同的嵌入 URL 恢复。参阅取消发布地图。
弹出窗口	仅当作者启用了弹出窗口时，点击地图才会打开地点弹窗。
高度	挂载时元素有明确高度则按该高度显示，否则固定为 500 像素。
加载	SDK iframe 延迟加载，在接近可视区域时启动。
密钥	不需要。不要向 Viewer 挂载传入公开密钥；这会产生不必要的会话请求，若请求被拒绝，地图也无法显示。

已发布地图上的上传数据

Studio 的 Data 面板中的数据集是发布地图的一部分。访客会看到按照您设定样式绘制的数据图层，以及对应位置的图像叠加层。无论普通 iframe、SDK 元素还是分享链接，行为都相同；无需额外开启功能，嵌入页面也不需要密钥。

由于已发布地图始终展示当前保存的内容，即使地图已经发布，新增数据集也会在保存后立即公开，无需重新发布。

哪些数据会被提供、谁能访问：

只有已发布地图的数据。 数据集仅作为已发布地图或分享链接的一部分提供给访客，且仅限地图包含的数据集。未发布地图上的数据集不会提供。
不能单独获取数据集。 没有列出地图全部数据集的接口；脱离所属的已发布地图，数据集 ID 不能独立访问内容。
能打开地图的人就能读取数据。 已发布地图是公开的。允许域名决定地图能在哪些网站显示，不会对数据保密。
发送所有列，而不仅是用于样式的列。 每个访客的浏览器会收到所有行和所有列。发布前应从文件中删除不宜公开的列，并重新上传。

如何停止向访客提供数据集：

您在 Studio 中的操作	对已发布地图的影响	对分享链接的影响
在 Data 面板删除数据集	数据集被删除，不再向访客提供；地图其他部分不变。	分享链接仍能打开地图，但不再绘制该数据集图层。
取消发布地图	地图及其数据集停止提供。	不影响已有分享链接；链接继续展示创建时的数据。

要删除数据集，请在“数据”面板中点击对应行的垃圾桶图标并确认。删除或替换数据集介绍了操作步骤以及之后使用“撤销”的效果。仅删除展示数据集的图层并不等同于删除数据集：数据集仍存储在系统中并保留在地图内，因此仍会向访客提供。

共享链接是地图设计的快照。 它显示创建链接时的地图状态；之后编辑地图或取消发布地图，都不会改变该链接显示的内容。快照还保留创建时的地图名称、允许域名列表及 Kaleidr AI 开关，因此以后修改这些设置，不会改变已生成的共享链接可在何处显示或提供哪些 Kaleidr AI 功能。但共享链接的 Kaleidr AI 还依赖地图：仅在地图处于发布状态期间、且仅在地图当前允许域名所包含的网页上可用，因此取消发布地图或删除域名会使其停止。费用由地图所有者支付；参见已发布地图上的 Kaleidr AI。

分享链接是地图设计的快照。 它展示生成链接时地图的样子；之后编辑或取消发布原地图不会改变该链接。不过数据集是例外：分享链接会读取与原地图相同的已存储数据，因此删除数据集也会让所有使用它的分享链接不再显示该数据。

每次打开 Studio 的 Share 对话框时，Studio 都会发布地图并生成一个新分享链接。因此多次分享的地图可能有多个链接，每个都保留各自创建时的设计快照。

Studio 没有暂停或删除分享链接的控制项。链接会一直有效，除非删除其展示的数据或联系 Kaleidr 移除链接。需要分享较新的地图状态时，请再次打开 Share 获取新链接；原来的链接保持原有内容。

取消发布地图

在 Publish & embed 页面，已上线地图的 Re-publish 旁边有 Unpublish 按钮。Studio 会询问：“Unpublish this map? Embeds of it stop working. Share links you have already handed out still show the map, but their Kaleidr AI stops.”确认选择 Unpublish，否则选择 Cancel。

地图的所有嵌入立即停止：框架显示“不可用”提示并发送 not_found。
地图保留原 ID。再次选择 Go Live 后，同样的嵌入 URL 恢复可用，无需修改网页代码。
已经分享出去的链接继续有效，并保留其对应数据。但在重新发布地图之前，其 Kaleidr AI 会停止。

并非所有位置都会立即停止访问：

已经加载数据的浏览器会保留这些数据。 已打开地图的访客仍能看到图层，浏览器也可能在接下来的几分钟内复用缓存数据。
已经签发的下载链接可能继续有效最多一小时。 对大型数据集，浏览器收到一个临时下载链接；在删除数据集或取消发布前签发的链接最长到期时间为一小时。

数据加载方式：

每位访客都会下载整个数据集。 地图不会随着拖动按区域分块加载数据集。因此行数或列数多的数据表显示更慢，网络连接较慢时尤为明显。请只发布地图需要的行和列。
单个数据集加载失败不会导致整张地图不可用。 其他地图内容仍能显示，只是缺少该图层。

上传配额请参阅数据集限制。

地图浏览量如何计算

访客每次加载嵌入地图时，都会在地图所属组织（而非嵌入网站）的配额中计入一次地图加载。同一访客在 24 小时内再次加载同一地图不会重复计数。Studio 预览等 Kaleidr 自有页面中的浏览不计入配额。

如果组织在当前周期已耗尽地图加载配额，嵌入框会显示达到限制的提示，并发送 map_loads_exhausted，直至配额重置。请参阅配额与速率限制。

检查是否正常运行

**网页中：**地图显示标记、路线，以及 Studio Data 面板上传的数据集和图像叠加层；它们按设定的图层样式绘制。地图缩放按钮正常工作，地图底部有版权与来源信息。
**控制台中：**没有包含 [kaleidr 的错误。
**网络面板中：**请求 https://map-embed.kaleidr.com/embed/YOUR_MAP_ID，状态为 200。SDK 元素还会从 https://cdn.kaleidr.com 加载 kaleidr.js 和 viewer.js。
**消息监听器中：**收到一条 kaleidr-embed:ready 消息。

故障排查

现象	原因	解决方法
无论设置怎样的 `height`，地图都只有 500 像素高。	挂载时元素没有高度、CSS 将其设为 `display:inline`，或旧版 Safari 未指定 `display:block`。	在元素可见时挂载，并设置 `display:block` 和高度。
完全没有显示，控制台出现 `[kaleidr] <kaleidr-map> requires product="chat\|viewer\|editor\|tile"`。	`product` 属性缺失或拼写错误。	设置 `product="viewer"`。
控制台：`[kaleidr:viewer] Kaleidr map: invalid id "" — must match ^[A-Za-z0-9._~-]{1,100}$.`	`share-id` 缺失、为空或包含不允许的字符。	从 Studio 重新复制 ID。
控制台：`[kaleidr:viewer] mount target not found: #map`	`Kaleidr.mount` 运行时目标元素尚不存在，或选择器错误。	在元素后执行脚本或更正选择器。
控制台：`Kaleidr is not defined`	SDK 脚本尚未加载完成。Studio 示例用 `async` 加载。	移除加载标签中的 `async`，或在脚本的 `load` 事件中运行代码。 `kaleidr.js`
框架提示 “This map isn't available…”	地图尚未发布、已取消发布，或 ID 错误。	在 Studio 选择 Go Live，并使用正确 ID；重新发布保留原 ID。
框架提示 “This map isn't allowed to render on this site.”	网站不在允许域名列表，或没有发送 Referer。	在 Studio 加入域名，或修改网页的 Referer 策略。参阅第 5 步。
框架提示 “This map has reached its map load limit.”	地图所属组织已用完周期内的地图加载额度。	等待重置或提高配额。参阅配额与速率限制。
框架提示 “Could not load the map. Please try again in a moment.”	地图请求失败。	重新加载；如持续失败，检查网络并尝试在新标签页打开 iframe URL。
空白框架且控制台提示 `frame-src` CSP 违规。	安全策略不允许加载框架。	在 `frame-src` 中允许 `https://map-embed.kaleidr.com`。
控制台提示 `script-src` CSP 违规。	安全策略不允许 SDK 加载脚本。	在 `script-src` 中允许 `https://cdn.kaleidr.com`，或者使用普通 iframe。
`setCamera` 没有效果。	地图尚未加载、调用仍在等待，或句柄已销毁。	查看 `kaleidr-embed:error` 消息和控制台；地图就绪后会执行之前的相机命令。如果地图在有限等待时间内（通常是 iframe 加载后 10 秒）仍未报告就绪，该调用仍会发出，控制台将显示 `[kaleidr] the map frame has not reported ready`；出现错误的 iframe 中没有可移动或修改的地图。
`el.setCamera is not a function`	在元素上调用了 `setCamera`。	通过 `Kaleidr.mount` 返回的句柄调用，或修改元素的相机属性。
页面滚动到地图处时停止滚动。	这是预期行为：指针位于地图上方时，滚动会缩放地图。	将指针移到地图旁边再滚动。让地图高度小于屏幕高度，以便访客可以滚动越过它。
嵌入地图没有显示最新修改。	嵌入地图只在加载时读取 Studio 已保存的内容；页面在保存前已经加载。	重新加载嵌入网页，不需要重新发布。
嵌入地图显示了不该公开的修改。	已发布地图会展示 Studio 当前保存的内容。	撤销修改；需要私下编辑时先取消发布，或使用地图副本。参考
已上传数据集对应的图层不见了。	数据集被删除或此时加载失败；地图其他部分仍显示。	检查 Studio Data 面板是否仍有该数据集及图层，然后重新加载网页。
大型数据集的图层出现较晚。	每位访客都要下载整个数据集。	减少上传的行数和列数，参阅上传数据。

限制

嵌入地图是只读的。网页不能为其添加标记或图层、读取数据或接收点击事件。
网页只能接收 kaleidr-embed:ready 和 kaleidr-embed:error 两种消息。
不能从嵌入组件直接修改地图样式或更换底图，应在 Studio 中修改，下次加载时生效。
元素挂载后再修改 share-id 不会生效；应移除并重新创建元素，或调用 handle.destroy() 后重新挂载。
允许域名的检查依赖浏览器的 Referer，不是保密措施。

后续步骤

Viewer 参考文档：所有选项、属性和消息。
已发布地图上的 Kaleidr AI：让访客就地图提问。
地图数据集：支持上传的文件、限制及字段角色。
框架集成：在 React、Next.js 和 Vue 中挂载及销毁地图。
Content Security Policy：网站安全策略配置。

开始之前​

第 1 步：发布地图​

第 2 步：复制嵌入代码​

第 3 步：将代码添加到页面并设置尺寸​

第 4 步：设置初始相机视角（可选）​

第 5 步：限制哪些网站可以显示地图（可选）​

第 6 步：获知地图加载成功或失败（可选）​

完整网页示例​

运行方式​

已发布地图上的上传数据​

分享链接​

取消发布地图​

地图浏览量如何计算​

检查是否正常运行​

故障排查​

限制​

后续步骤​