html5静态页需通过高德或腾讯地图js sdk嵌入地图；高德要求https、webkey及v=2.0，初始化前需amap.ready；腾讯需白名单、qq.maps.loaded监听，且经纬度顺序为lat,lng；地理编码须用sdk封装方法避免跨域。
HTML5 静态网页本身不自带地图能力，必须通过第三方地图服务的 JS SDK 嵌入，最常用且兼容性最好的是高德地图（AMap）和腾讯地图（QQMap），Google Maps 因网络原因在国内基本不可用。
怎么用高德地图 JS API 在静态页里显示一个基础地图
高德提供免费配额（日调用量 1000 次以内免密钥），但必须在 https 协议下运行（本地 file:// 直接双击打开会失败）；需申请 WebKey 并在 script 标签中传入 key 参数。
- 确保页面有明确宽高的容器，例如：
<div id="map" style="width: 600px; height: 400px;"></div> - 引入 SDK 脚本时必须带
key和v=2.0（v2 是当前稳定版）：<script src="https://webapi.amap.com/maps?v=2.0&key=你的WebKey"></script>
- 初始化地图要在
AMap加载完成后执行，推荐用AMap.ready或直接写在 script 尾部（避免 DOM 未就绪）：var map = new AMap.Map('map', { center: [116.397428, 39.90923], // 经纬度数组：[lng, lat] zoom: 13 }); - 若控制台报错
AMap is not defined，大概率是 script 未加载完成就执行了 new AMap.Map，或 key 无效/未开启“Web端”权限
为什么腾讯地图在静态页里加载失败？常见报错和修复点
腾讯地图 JS API 对协议和域名限制更严格：即使本地用 http://localhost 也需在控制台白名单中添加；file:// 完全不支持，且不返回详细错误信息，只静默失败。
- 必须在腾讯位置服务后台开通“JavaScript API”，并勾选“Web服务”和“JavaScript API”两个开关
- 白名单必须填完整域名，如
localhost、127.0.0.1、your-site.com，不能写http://localhost:8080这种带协议和端口的格式 - 引入脚本后，要等
qq.maps.loaded变为true才能初始化：<script src="https://map.qq.com/api/js?v=2.exp&key=你的Key"></script> <script> function initMap() { var map = new qq.maps.Map(document.getElementById('map'), { center: new qq.maps.LatLng(39.90923, 116.397428), // 注意：腾讯是 [lat, lng] zoom: 13 }); } qq.maps.event.addListenerOnce(qq.maps, 'loaded', initMap); </script> - 经纬度顺序搞反（腾讯是
lat, lng，高德是lng, lat）会导致地图中心偏移到南美洲或南极
静态页没后端，怎么查地址转坐标（地理编码）
不能直接调用高德/腾讯的 REST API（跨域限制），必须走前端 SDK 提供的封装方法，它们内部已处理 CORS 和签名逻辑。
立即学习“前端免费学习笔记（深入）”；
- 高德用
AMap.Geocoder：var geocoder = new AMap.Geocoder(); geocoder.getLocation('北京市朝阳区建国路1号', function(status, result) { if (status === 'complete' && result.info === 'OK') { var loc = result.geocodes[0].location; // "116.434897,39.908672" var lnglat = loc.split(',').map(Number); // [116.434897, 39.908672] } }); - 腾讯用
qq.maps.Geocoder：var geocoder = new qq.maps.Geocoder({ complete: function(result) { var pos = result.detail.location; console.log(pos.lat, pos.lng); // 注意顺序 } }); geocoder.getLocation('北京市朝阳区建国路1号'); - 两者都要求地址字符串尽量规范，避免“附近”“旁边”等模糊词，否则可能返回空结果或偏差 >500 米
所有地图 SDK 都依赖浏览器地理位置 API 或 IP 定位，静态页无法绕过用户授权弹窗；如果只是展示固定位置，别费劲调用定位接口，直接写死坐标更稳。另外，移动端 Safari 对 iframe 嵌入地图（比如百度地图 iframe 版）支持差，优先用原生 JS SDK。
