DOCS

嵌入小组件

如何将 tickadoo 地图小组件添加到您的网站。

有两种方式可以将 tickadoo 地图小组件嵌入您的网站。两种方式都可以在管理面板的分销页面获取。

简单嵌入（推荐）

在页面任意位置添加一个 script 标签，小组件会自动渲染。

Simple embed 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>

地图会出现在 script 标签的位置，并填满容器的宽度。它有默认高度，但您可以通过父元素的 CSS 来控制尺寸。

Tip

将 script 标签放置在具有指定高度的容器内以获得最佳效果。小组件会扩展以填满可用空间。

高级嵌入

如需更多对布局和样式的控制，请使用 Web Component 方式：

Advanced embed 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px">
</tickadoo-map>

使用此方式：

  • defer 属性可以在不阻塞页面渲染的情况下加载脚本
  • <tickadoo-map> 元素让您完全控制位置和尺寸
  • 您可以像任何其他 HTML 元素一样用 CSS 设置样式

调整小组件尺寸

小组件会遵循容器的尺寸。以下是常见模式：

固定高度

Fixed height container 
<div style="height: 600px">
  <script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" data-connect-map="YOUR_MAP_ID"></script>
</div>

全视口高度

Full viewport 
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 100vh">
</tickadoo-map>

响应式宽高比

Responsive aspect ratio 
<tickadoo-map map-id="YOUR_MAP_ID" style="aspect-ratio: 16/9; width: 100%">
</tickadoo-map>
我应该把 script 标签放在哪里？

对于简单嵌入，地图会在 script 的位置渲染。将其放在您希望地图出现的页面部分 — 通常是内容区域或专用的地图区域。

对于高级嵌入，将 <script> 标签放在 <head> 或 <body> 末尾，然后将 <tickadoo-map> 元素放在您想要显示地图的位置。

我可以在一个页面上嵌入多个地图吗？

可以，但每个地图应使用独立的 <tickadoo-map> 元素并采用高级嵌入方式。脚本只需加载一次。

Multiple maps 
<script src="https://b2b.tickadoo.com/widget/map-widget.iife.js" defer></script>
<tickadoo-map map-id="MAP_ID_1" style="height: 400px">
</tickadoo-map>
<tickadoo-map map-id="MAP_ID_2" style="height: 400px">
</tickadoo-map>

CMS 平台

WordPress
  1. 编辑您想要放置地图的页面或文章
  2. 添加一个自定义 HTML块（在 Gutenberg 编辑器中）
  3. 粘贴简单嵌入代码
  4. 发布或更新页面
Squarespace
  1. 编辑页面并添加一个代码块
  2. 粘贴简单嵌入代码
  3. 保存并发布
Wix
  1. 在页面中添加一个嵌入 HTML元素
  2. 将简单嵌入代码粘贴到代码字段中
  3. 根据需要调整元素大小
  4. 发布