用 iframe 嵌地图最简单但仅适合静态展示，不支持交互、响应式及移动端适配；需设外层容器宽高，注意 referer 限制；交互必须用 JS SDK，注意版本、坐标系（WGS-84 需转 GCJ-02/BD-09）和 CSS 手势兼容性。
用 iframe 嵌地图最简单，但只适合静态展示
直接拿地图服务商给的分享链接套 iframe 是最快能出效果的方式，比如高德、百度、腾讯都提供「嵌入代码」按钮。但注意：这种嵌入不支持交互定制（比如加标记、监听点击）、不能响应式缩放、移动端经常被截断。
常见错误现象：iframe 在手机上显示不全，或加载后地图一片灰色——大概率是父容器没设 width 和 height，或者服务商限制了 referer（尤其百度地图对域名白名单卡得严）。
- 必须给
iframe外层容器设width: 100%和具体height（比如400px），不能只靠iframe自身属性 - 百度地图嵌入需在控制台开通「静态图服务」并配置合法 referer，否则返回
403 Forbidden - 高德和腾讯的分享链接默认带
zoom、center参数，可手动改，例如把&zoom=12改成&zoom=14
想交互？必须用 JS SDK，选错版本会白屏
要加标记、画路线、响应点击事件，就得引入官方 JS SDK。但不同服务商的 SDK 加载方式、初始化逻辑、坐标系差异极大，混用或版本错配直接导致 AMap is not defined 或地图空白。
使用场景：需要用户点击标记弹窗、拖动地图后获取中心点、绘制热力图等。
立即学习“前端免费学习笔记（深入）”；
- 高德用
AMap.Map，必须先加载https://webapi.amap.com/maps?v=2.0&key=你的key；v2.0 和 v1.4.15 的 API 不兼容，别抄旧教程 - 百度地图 v3.0 要求 HTTPS 页面，且
BMapGL.Map（WebGL 版）和BMap.Map（传统版）不能共存，后者已停止维护 - 腾讯地图 SDK 需显式调用
qq.maps.init，且 key 必须带libraries=drawing,geometry才能用绘图工具
坐标系不统一，标记全偏移几百米
国内所有地图 SDK 默认用各自加密坐标系（GCJ-02 或 BD-09），而你手里的经纬度如果是 WGS-84（比如 GPS 设备直出、OpenStreetMap 数据），直接传进去，标记会整体偏移 300–700 米，不是 bug，是合规要求。
参数差异：高德、腾讯用 GCJ-02，百度用 BD-09，三者互转必须调用对应 SDK 的转换方法，不能靠简单加减。
- 高德 SDK 提供
AMap.convertFrom，类型必须填gps（WGS-84）才能转 GCJ-02 - 百度 SDK 的
BMap.Convertor.translate已废弃，v3.0 改用new BMapGL.Geocoder().getPoint异步反查，效率低，建议前端预转 - 别信网上“加 0.006 度就准”的土办法——城市间偏移量不一致，深圳和哈尔滨差值能差一倍
移动端手势失效、缩放卡顿，其实是 CSS 搞的鬼
地图容器上如果加了 touch-action: none、user-select: none 或者外层用了 transform: scale()，iOS Safari 和安卓 Chrome 会直接禁掉双指缩放、拖拽等原生手势。
性能影响：地图 DOM 层级过深、或父元素有 will-change: transform，会导致渲染掉帧，尤其在低端安卓机上拖动地图明显卡顿。
- 检查地图容器及其所有祖先元素的 CSS，删掉任何
touch-action相关声明 - 避免用
scale()缩放整个地图区域，改用 SDK 的setZoom方法 - 腾讯地图在 iOS 上若父容器有
overflow: hidden，会切掉地图边缘，换成overflow: visible再包一层clip-path控制可视区更稳妥
