集成

网站嵌入与安全

将交互地图嵌入至 Webflow、WordPress、Shopify、Next.js 或任意独立网站。通过来源白名单牢固保护您的视觉资产。

安装方法：脚本与 iframe

Layerpin 为您提供了两种安装方法，可以在任何网站、CMS 或 Web 应用程序上发布交互式地图。两种方法都支持流畅响应、多点触控捏合缩放和动态容器大小调整：

选项 1：安装脚本

受到推崇的

单个自初始化脚本标记。它会自动测量容器宽度、管理动态视口高度并防止累积布局变化，而无需自定义 CSS。

<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>

最适合： Webflow、WordPress、Framer、Ghost 和自定义 HTML 模板。

选项 2：响应式 iframe

标准沙盒 iframe 片段。非常适合严格的 CMS 环境、第三方沙箱和限制外部 JavaScript 标签的平台。

<iframe
  src="https://layerpin.com/embed/emb_YOUR_MAP_ID"
  title={t("Interactive map")}
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="fullscreen"
  allowfullscreen
  style="display:block;width:100%;height:640px;min-height:320px;border:0;"
></iframe>

最适合： Wix、Squarespace、Shopify 和严格的 React / Next.js 沙箱。

直接 URL 保护

设计上会阻止直接在浏览器地址栏中访问嵌入 URL。 Layerpin 需要经过验证的父源才能在授权的嵌入容器中安全地渲染地图。

高度预设和响应式布局

嵌入宽度始终拉伸以填充其包含块的 100%。您可以从四个预定义的高度预设中进行选择或指定自定义尺寸：

袖珍的

560 像素（最小 320 像素）

适用于侧边栏、产品详细信息小部件和紧凑的博客插入。

标准默认

640 像素（最小 320 像素）

全角登陆页面、指南和目录列表的平衡默认设置。

高的

720 像素（最小 420 像素）

专为多层建筑蓝图、校园参观和高密度原理图而设计。

全视口

100dvh（最小 240 像素）

填充移动设备和桌面上的整个浏览器视口，非常适合专用地图浏览器应用程序。

自定义像素高度： Choose "Custom height" in the Layout dropdown to configure explicit pixel values between 240 px and 1,600 px for both primary height and minimum height.

加载模式和查看器控件

配置嵌入地图的加载方式以及访问者可以使用哪些控件：

延迟加载与急切加载

惰性（默认）： Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. 渴望的： 立即加载英雄部分的初始 HTML 解析。

允许全屏

在查看器内启用全屏展开按钮。访问者可以将地图扩展到整个显示器以进行深入检查，而无需离开您的网站。

Layerpin 归因

在嵌入式查看器内切换平台归属徽章。付费计划可以隐藏品牌，以实现无缝、完全白标的视觉呈现。

本地化嵌入 (?lang=)

传递语言查询参数（例如 ?lang=ja) 在 iframe 中 源代码 to pre-select the locale on regional pages. Learn more in the 多语言指南.

允许的来源和域白名单

域白名单可确保您的交互式地图只能嵌入您批准的网站上。尝试对您的地图进行 iframe 的未经授权的域将收到访问被拒绝的通知。

来源安全规则

所需的 HTTPS 协议： Embed origins require secure connections. Enter domains with or without protocol (e.g., https://mycompany.com or mycompany.com).
无路径、查询或哈希： Do not include subpaths or parameters (e.g., use https://store.example.com, not https://store.example.com/map?view=1).
通配符子域匹配（高级）： Add https://*.mycompany.com to authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule.
严格的推荐人政策： Iframes must include referrerpolicy =“跨源时严格源” so the browser sends the parent origin header to our authorization validator.

启用嵌入的先决条件

地图必须是发表并且在打开网站嵌入之前至少列出一个有效来源。

试用地图是私人草稿，在选择有效地图计划之前无法公开嵌入。

嵌入 ID 撤销和轮换

如果嵌入代码在公共代码存储库中意外泄露，或者外部机构交接完成，您可以立即轮换令牌：

重新生成您的嵌入 ID

在“嵌入配置”页面右侧的实时状态栏中，单击 重新生成ID. Layerpin instantly creates a brand new unique embed token (e.g., 嵌入_...).

立即撤销： 所有引用已撤销嵌入 ID 的现有安装都将立即停止加载。您必须使用新生成的代码片段更新您的网站代码块。

多设备实时预览

在将代码发布到生产网站之前，直接在 Layerpin 仪表板内测试实时嵌入体验：

台式机（100%）

模拟标准桌面显示器和宽屏视口。

平板电脑（768 像素）

使用响应式 UI 抽屉测试 iPad 和平板电脑布局。

移动设备（390 像素）

验证手机上的触摸导航、弹出表格和捏合缩放。

免费仪表板预览

仪表板“预览”选项卡内生成的地图印象不会计入您的每月地图视图配额。您可以自由检查布局更改并测试类别过滤器。

网站建设者和 CMS 指南

Layerpin 交互式地图可与所有主要网站构建器原生配合使用。在下面选择您的平台以获得量身定制的设置建议：

WordPressInstallation script

Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.

平台文档

WebflowInstallation script

Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.

平台文档

WixIframe code

Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.

平台文档

SquarespaceIframe code

Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.

平台文档

FramerInstallation script

Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.

平台文档

GhostInstallation script or iframe

Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.

平台文档

详细教程

需要 Webflow、WordPress、Wix、Squarespace 或 Framer 的分步屏幕截图？

阅读我们深入的网站构建器嵌入指南

始发地限制和计划容量

允许的源容量和通配符支持由您的有效订阅计划决定：

计划	允许的来源	通配符域 (*.)	包含每月观看次数	已发布的地图
Trial	Private only	不支持	Draft testing only	0 (Draft only)
Basic	10 origins	不支持	5,000 views	3 maps
Pro	25 origins	不支持	25,000 views	15 maps
Premium	50 origins	支持	100,000 views	50 maps