返回 BIM 与 IFC 博客
工具与对比 · 2026-10-31 · 5 分钟
如何在网站上嵌入货运跟踪地图：WordPress、Shopify、SharePoint 和淘宝
供应商和货代可以在自己的网站上向客户展示货物位置，无需地图 API 密钥或后端。本文说明每个平台能做什么、对页面有何影响，以及哪些地方的诚实答案是不行。
如何在网站上嵌入货运跟踪地图：WordPress、Shopify、SharePoint 和淘宝 — IFC Viewer Online article cover
等待上海集装箱的买家，通常只收到一份 PDF 和一个船公司链接。如果您是供应商或货代，可以在自己的网站上用地球和您的配色展示同样的信息。Tracking Globe 只需一段代码，无需地图 API 密钥，适合大多数网站。但并非全部，本指南会说明哪些不行。
要点
- WordPress 和 Shopify 支持 script 标签。SharePoint Online 支持 iframe，前提是网站所有者允许该域名。
- 在淘宝和天猫，我们无法确认运行实时组件的方法，因此可行的方式是图片。
- 它绘制您的数据，或始终带有标识的模拟数据。它不连接承运商。
- 约 30 KB，分两步加载，无 Cookie，无第三方请求。
真实组件中的模拟货运。模拟数据始终带有可见标签。
各平台的接入方式
| 平台 | 接入方式 | 限制 | 我们测试的内容 |
|---|
| 任意 HTML 网站 | script 标签和元素 | 严格的 Content-Security-Policy 必须列出脚本主机 | 桌面和手机，已测量体积和布局偏移 |
| WordPress | 自定义 HTML 区块，或我们小插件的短代码 | 没有 unfiltered_html 的角色会丢失代码；WordPress.com 需要付费套餐 | 在浏览器中测试区块标记，用 PHP 测试插件；未在真实安装中测试 |
| Shopify | 自定义 Liquid 分区，或主题分区文件 | 富文本字段会移除代码；有自己策略的无头商店必须允许该主机 | 使用真实商店安全响应头的页面；未在商店内测试 |
| SharePoint Online | “嵌入” Web 部件，以 iframe 方式 | 网站所有者必须允许该域名；页面脚本不运行 | 严格策略下的沙盒 iframe；未在真实租户中测试 |
| 淘宝 / 天猫 | 店铺图片空间中的图片 | 无法确认实时组件；外部链接受限 | 仅图片导出 |
四步添加
- 选择数据 模拟演示、粘贴的表格或 JSON，或您自己返回 JSON 的 URL。粘贴的数据可在页面源代码中读取，因此私密货运应放在数据 URL 或单号查询之后。
- 匹配品牌 颜色、Logo、字体、语言和高度。您的样式表也可以设置这些变量，让组件跟随网站主题。
- 决定访客可以控制什么 拖动、缩放、地球与地图切换、列表、搜索、图例和全屏都可以单独关闭。模拟标签不能关闭。
- 复制对应平台的代码 配置器会为每个平台生成合适的版本，包括 SharePoint 所有者需要允许的域名。
真实数据，不经过我们的服务器
每位访客的浏览器直接调用您的 URL，因此货运数据不会经过我们。该 URL 必须允许跨域请求，如果数据是私密的，还需要自己的访问规则。数据行接受承运商和表格常用的名称，例如 tracking_number、origin、destination、eta、latitude 和 longitude。包含 {id} 的查询 URL 每次返回一个单号，客户只能看到自己的货运，而不是您的全部业务。
对宿主页面的影响
3 KB 的加载器预留位置，页面不会跳动。27 KB 的引擎在地图距屏幕 300 px 时加载，也可以设为点击时加载。在桌面和模拟手机的测试页面上，布局偏移为零，引擎在滚动接近之前没有加载。离开屏幕后停止绘制，除非按住 Ctrl 或 ⌘，否则滚轮仍滚动页面，减少动态效果的设置会停止旋转。世界地图内置在文件中，访客 IP 不会发送给地图服务商。
答案是不行或暂时不行的地方
WordPress 会移除没有 unfiltered_html 权限[wp]的用户的 iframe 和脚本，WordPress.com 仅在付费套餐中允许[wpcom]。SharePoint 维护按网站的允许列表[sp]，我们没有构建需要租户应用目录的 SPFx Web 部件。关于淘宝，我们找到的最官方来源[taobao]是一份旧草案，因此在依赖任何做法之前请先询问平台。面向中国买家时，请将这两个文件托管在中国的服务器上：我们尚未测量本站从中国加载的情况。
如何在网站上嵌入货运跟踪地图：WordPress、Shopify、SharePoint 和淘宝