首选iframe嵌入地图——无需密钥、无配额限制、兼容HTTP/HTTPS，适用于静态地址展示；需动态交互（如定位、标记、路径规划）才用JS API，但须申请密钥、设固定宽高、确保DOM就绪。
直接嵌入地图定位展示，首选 方式——它不依赖密钥、无调用配额、HTTPS 或 HTTP 都能跑通，适合 90% 的联系页、地址展示等静态场景。需要动态交互（比如点击标记跳转、实时定位、路径规划）才必须上 JS API。
用 iframe 嵌入 Google / 百度地图（最省事）
这是最快出效果的方案，本质是把地图服务商生成的“快照”塞进网页，不写 JS、不申请密钥、不担心跨域。
- 打开 Google Maps 或 百度地图网页版，搜索目标地址（如“上海外滩”）
- 点右上角「分享」→「嵌入地图」→ 复制整段
代码 - 粘贴到 HTML 的
里，例如：<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
- ⚠️ 注意：默认
width和height是固定像素，放进响应式布局会崩。改成百分比或用 padding-bottom 技巧控制宽高比（推荐 16:9），否则小屏上横向溢出或留大片空白
用 JavaScript API 显示可交互地图（需密钥）
只有当你需要 navigator.geolocation.getCurrentPosition() 获取用户当前位置，并在地图上标出来，或者要加多个 Marker、监听点击事件、自定义样式时，才值得走这条路。但代价是：必须申请密钥、容器必须有明确宽高、脚本加载顺序不能错。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 百度地图：先去 百度地图开放平台 申请 AK，然后引入：
<script src="https://api.map.baidu.com/api?v=3.0&ak=%E4%BD%A0%E7%9A%84AK"></script> - 高德地图：注册后拿到 Web 端 Key，引入：
<script src="https://webapi.amap.com/maps?v=2.0&key=%E4%BD%A0%E7%9A%84KEY"></script> - 容器元素必须带
id且 CSS 中设好width和height（不能是auto或100%且父级没高度） - 初始化地图前，确保 DOM 已就绪。高德推荐用
AMap.ready(() => { ... })；百度建议把new BMap.Map(...)放在底部或DOMContentLoaded回调里
在页面中获取并显示用户实时位置（Geolocation + 地图）
单纯调用 navigator.geolocation.getCurrentPosition() 只能拿到经纬度，不连地图就是一串数字。要“展示”，必须把坐标传给地图实例做 setCenter 或 addMarker。
- 浏览器必须运行在 HTTPS 下（
localhost除外），否则 Chrome/Firefox 会静默拒绝定位请求 - 定位成功后，不要直接用原始坐标初始化地图——部分地图 SDK（如百度 v3.0）要求使用
BMap.Point包装，高德则接受数组[lng, lat]或对象{longitude, latitude} - 错误处理不能少：
getCurrentPosition的第二个回调会返回error.code，常见1（用户拒授）、2（位置不可用）、3（超时）。没做兜底的话，地图可能白屏且无提示 - 别忘了加权限提示文案，比如“点击获取您附近门店”——纯 JS 调用不会自动弹系统授权框，得靠用户主动触发（如按钮点击）才能唤起
最容易被忽略的是容器尺寸和脚本执行时机：哪怕密钥正确、坐标有效，只要地图 没设 height: 400px 这类明确值，或者 JS 在 DOM 解析完之前就执行了 new AMap.Map(...)，结果都是地图区域一片空白，控制台还未必报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
