最稳妥的地图嵌入方式是使用，因其兼容性好、零依赖、不触发跨域；需确保src含output=html（百度）或embed=1（高德）；交互功能必须用官方JS API并正确处理异步加载与key配置。
直接用
绝大多数场景下，别自己写 Canvas 或 WebGL 渲染地图——既没数据源，也没地理坐标纠偏能力，还容易违反地图服务商的调用条款。国内高德、百度、腾讯地图都明确要求使用官方 JS API 或 iframe 嵌入，否则可能被限流或封 IP。
推荐优先走 方式，兼容性好、零依赖、不触发跨域、加载失败也只影响地图区域：
- 高德地图：在 高德控制台「创建地图」 生成分享链接，复制其中的
代码 - 百度地图：进入 map.baidu.com 搜索地点 → 点右上角「分享」→ 选「嵌入网页」→ 复制代码
- 注意检查生成的
src是否含output=html（百度）或embed=1（高德），缺了会导致跳转而非内嵌
用 JS API 动态插入需先申请 key 并处理异步加载
如果要交互（比如点击标记弹窗、拖动后获取中心点），就得用官方 SDK。但不能直接 document.createElement('script') 后立刻调用 AMap.Map——SDK 还没载入完成。
正确做法是监听加载回调：
立即学习“前端免费学习笔记（深入）”；
-
AMap.plugin是必须的，即使只用基础AMap.Map类，也要显式声明依赖 - key 必须在高德控制台「应用管理」中创建 Web 平台应用并绑定域名，localhost 默认允许，但打包后部署到
file://协议会失败 - 若页面已存在多个地图容器，每个
new AMap.Map实例需独立 ID，复用 ID 会导致后初始化的覆盖前一个
可视化编辑器里插入地图常卡在「跨域」或「CSP 阻止 inline script」
像 GrapesJS、TinaCMS、Webflow 这类低代码编辑器，往往默认禁用内联脚本或限制外链资源。你粘贴的 JS API 代码大概率被过滤或执行失败，而 iframe 又可能被编辑器自动 sanitize 掉 src 属性。
解决路径很窄，优先试这三步：
- 查编辑器文档是否支持「自定义 HTML 组件」或「Embed Block」，把 iframe 放进白名单区块里
- 若必须用 JS API，改用「远程加载」方式：把地图初始化逻辑抽成单独
map-init.js，上传到同域 CDN，再用引入 - 遇到 CSP 报错
unsafe-inline，不要加宽策略，而是让编辑器后端在响应头中注入nonce，并在 script 标签里带上对应值
移动端缩放失灵、手势冲突是高频坑
在手机上双指缩放地图时，整个页面跟着缩放，或者地图不动只页面滚动——这不是代码写错了，是 viewport 设置和 CSS 冲突。
关键检查项：
- 确保页面
包含user-scalable=no？删掉。地图需要user-scalable=yes才能双指操作 - 给地图容器加
style="touch-action: pan-x pan-y;"（Chrome/Edge），iOS Safari 则需额外加-webkit-touch-callout: none; - 如果地图嵌在 modal 或 tab 页里，首次显示时容器宽高为 0，
new AMap.Map初始化后地图空白——得手动触发map.resize()
地图不是普通图片，坐标系、投影、瓦片加载、事件委托全耦合在一起。可视化编辑器省的是排版功夫，不是地理逻辑。别指望拖一个组件就出可点击热区，真要定制标记和路线，终究得写 JS、配 key、接回调。
