高级用法

高级嵌入技巧、性能提示和集成模式。

组件属性

<tickadoo-map> 网页组件接受以下属性：

属性	类型	默认值	说明
`map-id`	string	—	您的地图 ID（必填）
`locale`	string	`"en"`	界面语言（`en`、`de`、`es`、`fr`、`it`、`pt`、`ja`、`zh`、`cs`）
`theme`	string	`"system"`	颜色主题：`light`、`dark` 或 `system`
`mobile-list-variant`	string	`"carousel"`	移动端列表样式：`carousel` 或 `drawer`
`enable-routing`	boolean	`false`	显示步行/骑行/驾车路线导航
`center`	string	—	初始地图中心点，格式为 `"lng,lat"`（例如 `"14.42,50.08"`）
`zoom`	number	`10`	初始缩放级别（1–20）
`booking-mode`	string	`"calendar"`	预订流程类型
`use-category-colors`	boolean	`false`	使用分类特定的标记颜色

懒加载

如果地图不是立即可见的（例如在首屏下方或标签页中），可以延迟加载以提升页面性能：

Lazy loading

<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px" loading="lazy">
</tickadoo-map>

使用 loading="lazy" 后，地图仅在元素进入视口时才初始化。

响应式设计

小组件默认支持响应式，以下是常见布局的模式：

全宽区域

Full-width section

<section style="width: 100%; height: 70vh; min-height: 400px">
  <tickadoo-map map-id="YOUR_MAP_ID" style="width: 100%; height: 100%">
  </tickadoo-map>
</section>

侧边栏布局

Sidebar layout

<div style="display: flex; gap: 1rem; height: 600px">
  <div style="flex: 1">
    <!-- Your content -->
  </div>
  <tickadoo-map map-id="YOUR_MAP_ID" style="flex: 1">
  </tickadoo-map>
</div>

内容安全策略 (CSP)

如果您的网站使用内容安全策略，需要允许以下域名：

指令	域名	用途
`script-src`	`b2b.tickadoo.com`	小组件脚本
`script-src`	`calendar-js.tickadoo.com`	预订日历脚本
`connect-src`	`concierge.tickadoo.com`	API 请求
`connect-src`	`calendar-js.tickadoo.com`	预订日历翻译
`connect-src`	`pmtiles.tickadoo.com`	地图瓦片数据
`connect-src`	`mapbox.tickadoo.com`	路线规划服务
`img-src`	`*.tickadoo.com`	图片和图标
`style-src`	`'unsafe-inline'`	小组件样式

CSP header example

Content-Security-Policy:
  script-src 'self' b2b.tickadoo.com calendar-js.tickadoo.com;
  connect-src 'self' concierge.tickadoo.com calendar-js.tickadoo.com pmtiles.tickadoo.com mapbox.tickadoo.com;
  img-src 'self' *.tickadoo.com;
  style-src 'self' 'unsafe-inline';

性能注意事项

小组件脚本压缩后约 315KB（包括地图渲染器）。它会在用户平移和缩放时按需加载地图瓦片。为获得最佳性能：

在 script 标签上使用 defer 以避免阻塞页面渲染
如果小组件在首屏下方，在 Web Component 上使用 loading="lazy"
小组件会自动处理浏览器中的瓦片缓存

单页应用 (SPA)

如果您的网站是 SPA（React、Vue、Angular 等），请使用 Web Component 方式。<tickadoo-map> 元素可以与任何框架的 DOM 渲染配合使用。

对于 React：

React usage

function MapSection({ mapId }: { mapId: string }) {
  return (
    <div style={{ height: "500px" }}>
      <tickadoo-map map-id={mapId} />
    </div>
  );
}

确保脚本只加载一次，例如在 index.html 中或通过顶层组件的 useEffect 加载。

Tip

官方 React 包（@tickadoo/map-react）现已提供一流的集成支持。请通过 support@tickadoo.com 联系我们获取访问权限。Web Component 也可以作为 ESM 模块用于其他框架。