最稳妥方案是用 iframe 嵌入高德/百度地图，因其不依赖 js、无跨域限制，本地双击打开也能显示；需使用官方嵌入代码而非分享链接，并注意百度需去除 ?from=webapp 参数。
直接用 iframe 嵌入高德/百度地图最稳妥
绝大多数静态站点（尤其没后端、不跑 Node 或 Python）用 iframe 是唯一可行方案。它不依赖 JS 加载逻辑，不触发跨域限制，连本地双击打开 index.html 都能显示——前提是地图服务商允许外链。
高德和百度都提供「静态快照」或「分享链接转 iframe」功能，但注意：百度地图的公开分享链接默认带 ?from=webapp，这种链接直接塞进 iframe 会被拒绝加载；必须用其「嵌入代码」生成器输出的版本。
- 高德：进入「地图开放平台 → 控制台 → 创建应用 → 获取 Web 端 Key」后，用
https://www.amap.com/embed?markers=116.48,39.99&zoom=12&key=YOUR_KEY这类 URL 构造iframe src - 百度：必须登录「百度地图开发者平台」，新建「JavaScript API」应用，拿到
ak后拼接：https://api.map.baidu.com/marker?location=39.99,116.48&title=标注点&content=北京&output=html&src=yourdomain.com&ak=YOUR_AK - 别用「截图+绝对定位」假装是地图——缩放、拖动、响应式全失效，用户一交互就露馅
initMap() 报错 InvalidValueError: not a valid LatLng object
这是用 Google Maps JS API 时最常卡住的地方：你传给 new google.maps.Map() 的 center 值格式错了。不是字符串 "39.99,116.48"，也不是数组 [39.99, 116.48]，必须是对象 {lat: 39.99, lng: 116.48}（注意键名是 lat/lng，不是 latitude/longitude）。
另外，google.maps.Map 初始化必须等 DOM 就绪，且容器元素已存在并有明确宽高（比如 style="width:600px;height:400px;"），否则地图画布渲染失败，控制台可能只报 Cannot read property 'offsetWidth' of null 这种模糊错误。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 检查
<div id="map"></div>是否在内，且没被 CSS 设为display:none - 确保
initMap在google.maps.event.addDomListener(window, 'load', initMap)或DOMContentLoaded里调用 - 国内访问 Google Maps 需代理，否则脚本根本加载不到，
google全局变量为undefined，后续所有调用都会报错
用 Leaflet + OpenStreetMap 避开授权和网络问题
如果只是标一个点、不需要路线规划或 POI 检索，Leaflet 是更轻量、更可控的选择。它不依赖商业 API Key，CDN 引入即用，且地图瓦片走 OpenStreetMap 公共服务，国内直连稳定。
关键点在于：Leaflet 默认不设中心点，你得手动 setView([lat, lng], zoom)；标注用 L.marker([lat, lng]).addTo(map)，坐标顺序是 [纬度, 经度]（和 Google 相反），别写反。
- 引入顺序不能错：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">必须在<script></script>标签前 - 容器
<div id="map"> 必须有 CSS 宽高，Leaflet 不会自动撑开，写成 <code>#map { height: 400px; width: 100%; }最安全 - OpenStreetMap 对中国境内坐标做了偏移（GCJ-02），如果你用的是百度/高德导出的经纬度，直接贴过去位置会偏 200–500 米；需用
proj4js或在线工具先转 WGS84 坐标 - 浏览器地址栏显示的是
file:///xxx/index.html—— 这意味着页面运行在file://协议下，而所有主流地图 JS API（Google、百度、高德）都禁止从该协议加载，会直接静默失败 - 确认你没把
map.js放在子目录却忘了改<script src="js/map.js"></script>中的路径，404 时控制台只会显示「Failed to load resource」，不会说哪个文件丢了 - 用 VS Code 装「Live Server」插件起本地 HTTP 服务（地址变成
http://127.0.0.1:5500/index.html），几乎所有地图都能正常加载
本地测试时地图空白？检查这三件事
双击打开 index.html 时地图不显示，90% 是协议或路径问题，不是代码写错。
坐标纠偏、API Key 有效期、HTTPS 混合内容拦截……这些坑往往要上线后才暴露，本地能跑通只是第一步。
