如何在任意网站嵌入地图组件

从生成器开始（唯一真正需要动手的一步）

一切都从地图嵌入生成器开始。地理编码只在那里做一次——您复制的代码片段带有固定坐标，所以以后地理编码服务中断或“地址规范化”都无法移动您的图钉。输入地址，看图钉落下，然后在复制之前把它拖到您实际的入口：这十秒的拖动，就是“正确的街道”和“正确的门口”之间的区别。

想在动手之前看看做好的多分店效果？打开生成器演示——它会加载一个含三个分店的示例公司，带地址、彩色编号图钉，地点面板也在预览里实时显示，可以随手点着试。

WordPress：插件短代码还是原始 iframe？

两条路最后得到的组件完全相同——看您的喜好。

插件方式（推荐）：下载 whatismylocation-widget.zip → wp-admin ▸ 插件 ▸ 安装插件 ▸ 上传插件 → 启用。然后添加一个短代码区块：

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

属性名和生成器里的选项一样：theme、marker、zoom、height、directions，多分店则用 pins="lat,lng,Label~Address|…"，再配合 panel= 和 motion=（见下方参考表）。生成器的 WordPress 部分会替您生成完整短代码——不用手打。

不用插件的方式：把生成器里的 iframe 粘贴到自定义 HTML 区块。组件一样，也没有插件需要更新；代价是内容里的标记更长，之后也无法按属性的方式编辑。

Squarespace、Shopify、Notion——以及其他平台

在 WordPress 之外，通常只要粘贴一次：添加您所用平台的 HTML/嵌入元素（Wix 的 Embed HTML、Squarespace 的 Code 区块、Webflow 的 Embed），把 iframe 放进去。有一点让地图组件比定位组件更省事：它不需要 allow="geolocation" 属性，因为它从不向访客索取任何东西——所以页面生成器重写您的 HTML 时，没有什么脆弱的东西需要保住。

Squarespace：添加一个 Code 区块并粘贴。有一点值得先知道：Code 区块需要 Business 套餐或更高——在 Personal 套餐上，这个区块会把您的代码当成纯文本显示，而不会渲染出来。

Shopify 值得比粘贴更好的做法：我们提供了现成的主题版块——在主题里放一个文件，您就有了原生的设置面板，分店是可拖动排序的区块，不用应用，也不用 API 密钥。

Notion 和 Google Sites 是按网址嵌入，不是按 HTML。它们根本不接受 iframe 片段——请在生成器里点复制组件网址，然后粘贴到 Notion 的 /embed 区块，或 Google Sites 的 Embed ▸ By URL。组件本身就是一个完整的独立页面，所以两种方式都能完美显示。

Salesforce Experience Cloud（公开社区站点）：把 iframe 放进 HTML Editor 组件——然后让管理员在 Setup ▸ Trusted URLs 里添加 whatismylocation.ai，并选上 frame-src CSP 指令，否则 Salesforce 会静默拦截这个框架。会写代码的团队也可以用约 10 行的 Lightning Web Component 包住同一个网址：

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

多个分店：地点面板

一个嵌入最多可放 10 个地点。在生成器的高级模式下，逐个放好图钉，给它标签和地址，然后点添加地点。访客会看到一个地点面板——桌面端是地图旁的折叠列表，手机上是可滑动的卡片条——图钉都带编号：点选某个分店，地图会飞到那里，并显示它的地址和它自己的获取路线链接。

• panel= 决定布局：auto（默认——iframe 宽时放侧边，窄时用卡片条）、side、bottom，或 none，即只有图钉加弹窗。
• motion= 设置切换动画：smooth（默认的飞行）、fade、lively 或 none。系统里开了“减弱动态效果”的访客，无论您选哪种，都会看到即时切换的版本。
• open=no 让所有条目一开始都折叠；地图会自动缩放到容纳全部分店，您设的 zoom 则变成上限。

选项参考

WordPress 疑难排查

短代码在页面上显示成了原文。那个区块不处理短代码。在区块编辑器里用短代码区块（不要用代码或预格式化区块）；在 Elementor 里用它的短代码组件，在 Divi 里用代码模块。用经典编辑器的人：在“可视化”标签里当普通文本输入。

什么都没出现。查看页面源代码，搜索 whatismylocation。如果看到关于缺少 lat/lng 的 HTML 注释，说明坐标缺失或无效——请从生成器复制完整短代码，不要手打属性。

保存后 iframe 就消失了（不用插件的方式）。WordPress 会为没有 unfiltered_html 权限的用户角色删掉 iframe——在多站点网络里，默认连管理员也算——有些安全插件也会这么做。插件短代码是干净的解决办法：它不依赖您的角色是否被允许保存原始 iframe。

地图是灰的／瓦片加载不出来。瓦片来自 tile.openstreetmap.org；非常激进的广告拦截器或公司网络可能会屏蔽它们（浮层卡片仍然会显示）。换一个网络，或用手机移动数据确认一下。

没有地点面板。面板从 2 个图钉起才出现——单个地点显示的是经典浮层卡片。也检查一下是不是设了 panel="none"。

切换动画不播放。几乎总是访客（或您自己）操作系统里的“减弱动态效果”设置——组件按设计尊重它，会即时切换。这不是故障，其他访客仍然会看到您选的效果。

改动没有生效。是某个缓存插件（或主机缓存）在提供旧页面。改完短代码属性后清除页面缓存——组件本身没有任何需要缓存的东西。