用 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 或地图空白。
使用场景:需要用户点击标记弹窗、拖动地图后获取中心点、绘制热力图等。
立即学习“前端免费学习笔记(深入)”;
网格图片手风琴jquery特效代码,结合网格手风琴缩略图和手风琴面板的功能,给你展示你的图片网站一个有趣的方法。你可以选择使用XML或HTML。功能强大的API将允许进一步提高这个jQuery插件的功能,可以方便地集成到您自己的应用程序。兼容主流浏览器,php中文网推荐下载! 使用方法: 1、在head区域引入样式表文件style.css和grid-accordion.css 2、在head
- 高德用
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控制可视区更稳妥










